html - 倾斜 div 容器上的文本溢出

Question

目前我对应该倾斜的容器使用clip-path。

.box {
  height: 150px;
  line-height: 150px;
  text-align: center;
  background: yellow;
}

#first {
  clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0 100%);
}

#second {
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
}

#spacing {
  height: 100px;
}

<div id="first" class="box">
  <p>
    first container with a very very very long text. It's really long and won't fit here. Some text may disappear when the screen size gets smaller.
  </p>
</div>

<div id="spacing">
</div>

<div id="second" class="box">
  <p>
    second container with a longer text
  </p>
</div>

如果窗口变小，文本不会换行，它只会消失。

如何让缺失的部分出现在下一行？

你可以在这个页面上找到我想做的事情的例子

https://www.thenativeweb.io/#

Answer 1

我相信以下方法可以解决您的问题。我删除了为#box定义的height和line-height，并添加了padding: 30px 0，这样就可以了一些空间来剪辑。现在文本的行为更加自然。您可以调整精确值。

.box {
  height: auto;
  text-align: center;
  background: yellow;
  padding: 30px 0;
}

#first {
  clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0 100%);
}

#second {
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
}

#spacing {
  height: 100px;
}

<div id="first" class="box">
  <p>
    first container with a very very very long text. It's really long and won't fit here. Some text may disappear when the screen size gets smaller.
  </p>
</div>

<div id="spacing">
</div>

<div id="second" class="box">
  <p>
    second container with a longer text
  </p>
</div>