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

我相信以下方法可以解决您的问题。我为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>

Answer 2

“如果窗口变小，文本将不会换行，只会消失。” -由于框类的行高而出现问题，必须从框类中删除height：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>

倾斜div容器上的文本溢出

2 个答案: