CSS 自动换行属性

CSS自动换行属性指定当内容超出容器宽度时是否自动换行到下一行。通过设置word-wrap和white-space属性，可以控制文本在容器中的换行方式。

word-wrap属性

word-wrap 属性指定文本是否换行到下一行。默认情况下，文本会延伸到容器边缘而不换行，这被称为 "不间断空间" ，可以通过设置 word-wrap: break-word; 来强制文本在单词中间断行。例如：

div {
  word-wrap: break-word;
}

在上面的代码中，当文本超出div容器时，单词会在中间换行，以避免文本延伸到容器边缘。

white-space属性

white-space 属性指定如何处理文本中的空格和换行符。默认情况下，浏览器会忽略额外的空格和新行字符。 但是，我们可以通过设置white-space属性来改变这种行为。

white-space 属性可用于以下值：

• normal：浏览器忽略额外空格和换行符
• nowrap：文本不会换行，所有空格和换行符都被忽略
• pre：浏览器保留文本中的空格和换行符，但无法自动换行
• pre-wrap：浏览器保留文本中的空格和换行符，可以进行换行
• pre-line：将文本中的空格和换行视为单个空格，并进行换行

例如：

p {
  white-space: pre-wrap;
}

上面的代码中，文本中的空格和换行符会被保留，并且可以进行换行。

示例

以下示例演示如何使用 word-wrap 和white-space 属性来控制文本在容器内的换行方式。

<div style="width: 100px; height: 100px; border: 1px solid black; word-wrap: break-word; white-space: pre-wrap;">
  This is a long text that will wrap to another line when it reaches the edge of the container.
</div>

在上面的例子中，文本会在容器边缘处换行。单词会在中间断开，空格和换行符也会被保留。

综上所述，word-wrap 和 white-space 属性是控制文本在容器中自动换行的两种方法。您可以根据需要使用它们来控制文本布局。