CSS | overflow-wrap 属性

overflow-wrap 属性用来指定一个元素的文本内容在遇到长的不可换行的单词时应该如何操作。

语法

overflow-wrap: normal | break-word;

• normal：默认值。内容不会在单词内断行。
• break-word：表示内容在需要时会在单词内断行。

示例

以下代码演示了两个 <div> 元素的不同 overflow-wrap 设置。

<div class="normal">
  This is a normal text. This text will not break inside words even if it's too long to fit in the given width of the container.
</div>

<div class="break-word">
  This is a text with the break-word property enabled. This property will break up long words if they can't fit in the container's width.
</div>

.normal {
  width: 200px;
  border: 1px solid black;
  overflow-wrap: normal;
}

.break-word {
  width: 200px;
  border: 1px solid black;
  overflow-wrap: break-word;
}

效果：

浏览器兼容性

overflow-wrap 属性得到了广泛的支持。请参阅 Can I Use 以获取更多信息。

总结

overflow-wrap 属性是控制文本内容换行方式的一种方法。它提供了两个选项：normal 表示内容不会在单词内断行；break-word 表示内容在需要时会在单词内断行。这个属性可以让长的、不可换行的单词自动换行，以便将它们适合其容器的宽度。