В настоящее время я использую 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/#