CSS Overflow Text Wrapping

当文本内容无法适应其容器时，可以使用 CSS 的溢出和文本换行属性来控制文本的呈现方式。

溢出属性（Overflow）

当文本内容太大，无法在容器中完全呈现时，可以使用 overflow 属性来定义如何处理溢出的文本。

• overflow: visible - 允许文本溢出容器，并且不添加滚动条；
• overflow: hidden - 隐藏溢出文本；
• overflow: scroll - 添加滚动条以允许滚动并显示所有文本；
• overflow: auto - 添加滚动条，但仅在文本溢出容器时才显示。

文本换行属性（Word Wrap）

文本可能会以不可读的方式被截断，尤其是在小屏幕上。因此，需要使用 Word Wrap 属性来控制文本是如何换行的。

• word-wrap: normal - 文本不会被强制换行；
• word-wrap: break-word - 如果文本太长，则在可能的断点处换行。

代码示例

使用 overflow 和 word-wrap 属性来控制文本溢出和换行。

.container {
  border: 1px solid #ccc;
  width: 200px;
  height: 100px;
  overflow: hidden; /* 隐藏文本溢出 */
  word-wrap: break-word; /* 在字之间断句 */
}

Markdown 代码块使用三个反引号将代码块括起来，并在开头添加语言标识符（即 css）。

结论

Reflow 花费很多计算资源。因此，如果能通过 CSS 控制文本溢出和换行，这将对性能产生积极影响。使用属性 overflow 和 word-wrap 可以控制文本如何展示，避免了文本截断和不可读的情况发生。