倾斜 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>

Answer 2

"如果窗口变小，文本不会分成新行，它只会消失。" - 由于盒子类的行高，问题来了，必须从盒子类中删除高度：150px。

.box {
height: auto;
line-height: auto;
text-align: center;
background: yellow;
padding: 80px 20px;
}
#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>