html - 尝试在具有不对称边(倾斜矩形)的 div 中写入文本，但它在 2 行之间拉伸(stretch)，为什么？

Question

这是我正在尝试做的代码:http://codepen.io/anatoly314/pen/Vebexq

为什么我的标题:Hello World!捕获两条线而不是一条线？我尝试在 .menu-header 类上调整宽度，但没有任何区别？

这是html部分:

<div class="cell">
        <div class="menu-item box_shadow">
            <div class="menu-image-container"></div>
            <div class="menu-header-container">
                <span class="menu-header">Hello World!</span>
            </div>
            <div class="menu-content-container">
               <ul>
                  <li>First</li>
                  <li>Second</li>
                  <li>Third</li>
              </ul>
          </div>
       </div>
</div>

和CSS部分:

.cell{
  min-height: 100vh;
  background-color: #FDDFD3;
  vertical-align: middle;
  display: flex;
  justify-content: center;
}

.menu-item{
  height: 80vh;
  background-color: grey;
  align-self: center;
  width: 20vw;
  border-radius: 25px;
}



.box_shadow {
  -webkit-box-shadow: 0px 0px 4px 0px grey;
          box-shadow: 0px 0px 4px 0px grey;
}

.menu-image-container{
  height: 50%;
  background-color: #fff;
   border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

.menu-header-container{
  border-top: 40px solid white;
  border-right: 20vw solid yellow;
  height: 10%;
}

.menu-header{
    position: relative;
    left: 15vw;
    top: -5vh;
}

.menu-content-container{
  height: 40%;
  direction: rtl;
}

Answer 1

你可以使用

.menu-header {
    position: relative;
    left: 15vw;
    top: -5vh;
    white-space: nowrap;
}

但我不确定这是不是你想要的。