text overflow on skew div containers - html

Question

currently I use clip-path for containers that should be skew.
.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>
If the window gets smaller the text will not break into a new line it will just disappear.
How can I make the missing part of the text appear in the next line?
You can find an example of what I want to do on this page
https://www.thenativeweb.io/#

Answer 1

I believe below approach solves your issue. I deleted defined height and line-height for #box, and added padding: 30px 0, so to make some space to clip. Now text acts more naturally. You can adjust precise values.
.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

"If the window gets smaller the text will not break into a new line it will just disappear." - problem is coming because of line-height of box class and have to remove height:150px from box class.
.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>