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

标签： htmlcss

Answer 1

我相信以下方法可以解决您的问题。我删除了 definedheight和line-heightfor #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>