文本溢出省略多行 - CSS

在一些 Web 开发中，我们经常会遇到需要在页面上展示长篇的文本内容，但是页面空间有限，无法完全展示文本内容。这时我们就需要使用 CSS 属性来实现文本溢出省略多行的效果，这样才能让页面更加美观和实用。

CSS 属性 - text-overflow

text-overflow 属性用于设置文本内容溢出时的显示效果。常用值有：

• clip：被裁剪的文本内容不显示，仅显示剩余的部分，不会出现省略号。
• ellipsis：被裁剪的文本内容以省略号 ... 显示，例如 abcde...。
• string：被裁剪的文本内容以自定义的字符串显示。

CSS 属性 - white-space

white-space 属性用于设置空白符的处理方式。常用值有：

• normal：合并连续多个空白符（包括换行符），并将内容折行。
• nowrap：不折行，超出可视区域的部分会被隐藏。
• pre：保留所有空白符和换行符，并将文本内容原封不动的显示。
• pre-wrap：保留所有空白符和换行符，但是会折行。
• pre-line：合并连续多个空白符（包括换行符），并将内容折行。

CSS 属性 - overflow

overflow 属性用于设置内容溢出的处理方式。常用值有：

• visible：内容超出可视区域时不做任何处理，允许溢出。
• hidden：内容超出可视区域时将其隐藏不显示。
• scroll：不允许内容溢出可视区域，出现滚动条以便查看全部内容。
• auto：根据内容的高度和可视区域的高度自动决定是显示滚动条还是让内容溢出。

示例代码

以下代码实现了一个文本溢出省略多行的效果：

.text {
    width: 200px; /* 宽度固定，用于限制文本展示区域 */
    white-space: nowrap; /* 不折行，超出可视区域的部分会被隐藏 */
    overflow: hidden; /* 隐藏超出可视区域的部分 */
    text-overflow: ellipsis; /* 超出可视区域的部分以省略号显示 */
}

<div class="text">这是一段过长的文本内容，用于演示文本溢出省略多行效果。</div>

注意事项

• 文本溢出省略多行的效果只能应用于单行文本。
• 如果想要设置多行文本溢出省略的效果，可以使用 css3 的新属性 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;。
• 以上示例代码需要在确定文本容器宽度的前提下使用。
• text-overflow 属性必须与 overflow 和 white-space 属性配合使用，否则可能无法得到期望的效果。