CSS 文本过长自动换行

在网页设计中，经常会遇到文本内容过长的情况，如果不对长文本进行处理，会导致页面布局混乱，用户体验差。为了解决这个问题，CSS 提供了文本自动换行的属性，可以自动将长文本进行折行显示，保持页面整洁美观。本文将详细介绍 CSS 中实现文本自动换行的方法。

word-wrap 属性

word-wrap 属性定义了在换行时是否允许单词内断开。它有两个可选值：

normal：默认值，当一行中没有足够的空间容纳整个单词时，将单词移到下一行。
break-word：当一行中没有足够的空间容纳整个单词时，将单词强制断行到下一行。

<style>
    p {
        width: 100px;
        border: 1px solid #000;
        word-wrap: break-word;
    }
</style>
<p>
    This is a long long long long long long long long long long long long long long long long long long long long
    long text.
</p>

上述示例中，p 元素设置了固定的宽度为 100px，超过这个宽度的文本将被强制断行到下一行。

overflow-wrap 属性

overflow-wrap 属性是 CSS3 中新增的属性，用于控制文本换行的行为。它有两个可选值：

normal：默认值，当一行中没有足够的空间容纳整个单词时，将单词移到下一行。
break-word：当一行中没有足够的空间容纳整个单词时，将单词断行到下一行。

<style>
    p {
        width: 100px;
        border: 1px solid #000;
        overflow-wrap: break-word;
    }
</style>
<p>
    This is a long long long long long long long long long long long long long long long long long long long long
    long text.
</p>

上述示例中，p 元素设置了固定的宽度为 100px，超过这个宽度的文本将被断行到下一行。

需要注意的是，overflow-wrap 属性在早期的 CSS 规范中被称为 word-wrap 属性，但在 CSS3 中进行了重命名。

white-space 属性

white-space 属性用于定义元素内部空白如何处理。在文本溢出场景中，我们可以利用 white-space 属性来实现文本的自动换行。

white-space 属性有以下几个可选值：

normal：默认值，合并连续的空白字符并折叠换行符。当一行中没有足够的空间容纳整个单词时，将单词移到下一行。
pre：保留连续的空白字符和换行符。
nowrap：不折行文本，可以导致文本溢出容器。
pre-wrap：保留连续的空白字符，但折叠换行符。
pre-line：合并连续的空白字符，但保留换行符。

<style>
    p {
        width: 100px;
        border: 1px solid #000;
        white-space: normal;
    }
</style>
<p>
    This is a long long long long long long long long long long long long long long long long long long long long
    long text.
</p>

上述示例中，p 元素设置了固定的宽度为 100px，超过这个宽度的文本将自动换行。

text-overflow 属性

text-overflow 属性可以用于在文本溢出容器时，显示省略号来指示被截断的文本。这个属性只对表格元素和块级元素有效。

text-overflow 属性有以下几个可选值：

clip：默认值，文本截断后被隐藏。
ellipsis：文本截断后用省略号 ... 表示。
fade：文本截断后淡出。

<style>
    div {
        width: 100px;
        border: 1px solid #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<div>
    This is a long long long long long long long long long long long long long long long long long long long long
    long text.
</div>

上述示例中，div 元素设置了固定的宽度为 100px，超过这个宽度的文本将被截断，并用省略号 ... 表示。