Multi tool use

text overflow on skew div containers

currently I use clip-path for containers that should be skew.

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>

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/#

2 Answers
2

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.

height

line-height

#box

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>

"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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.