当文本可换行时，您是否使用了 overflow-wrap？

假设您需要在多行中显示一个段落，您会如何实现？

例如：

<div class="wrapper">
  <p class="text">
    a long long long long long long long long long long paragraph
  </p>
</div>

.wrapper {
  width: 200px;
  background-color: pink;
}

通常情况下，这就足够了。

然而，如果文本可以由其他来源控制，例如用户输入，那么上述方法就不适用了。

例如：

<div class="wrapper">
  <p class="text">
    a long_long_long_long_long_long_long_long_long_long_ paragraph
  </p>
</div>

.wrapper {
  width: 200px;
  background-color: pink;
}

我找到的解决方案是：

.wrapper {
  width: 200px;
  background-color: pink;
  overflow-wrap: break-word;
}

其他可能的解决方案

• 实际上，您还可以使用 word-break: break-word;。然而，它已被标记为“已弃用”。

文章来源 ↗