CSS3 text-overflow 属性详解

CSS3 text-overflow 属性定义了当文本溢出其容器时如何显示文本。

语法

text-overflow: clip|ellipsis|string|initial|inherit;

参数说明：

• clip: 在发生文本溢出时，文本将被剪切掉。
• ellipsis: 在发生文本溢出时，文本将省略号来表示文本已被省略。
• string: 在发生文本溢出时，文本将在指定字符串处及其后面省略。
• initial: 将该属性设置为它的默认值（即"clip"）。
• inherit: 从父元素继承text-overflow属性设置。

注意：text-overflow 只在块级元素中的单行文本内容溢出时才会生效。

例子

我们通过以下 HTML 代码来演示 text-overflow 属性的使用：

<style>
    div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100px;
    } 
</style>
<div>这是一个超长的文本内容，我们希望它在一行内显示，当超过一定宽度时，用省略号替代</div>

解析：

• 我们设置了 white-space: nowrap;，强制文本在一行显示。
• 我们设置了 overflow: hidden;，将文本溢出的部分隐藏。
• 我们设置了 text-overflow: ellipsis;，当需要省略文本时使用省略号替代。
• 我们设置了 width: 100px;，容器的宽度为 100 像素。

效果如下：

注意事项

• text-overflow 属性只在单行文本元素中的溢出文本中使用。
• text-overflow 属性与 white-space 和 overflow 属性一起使用。
• 如果字符串值带有空格，则必须将其用引号或单引号括起来。
• 不支持在IE8及更早版本中使用。

总结

CSS3 text-overflow 属性用于定义溢出块级元素中的单行内容时的省略方式，通过 clip，ellipsis，string 等来实现文本省略。它适用于具有固定宽度和隐藏溢出文本的块级元素内容。

我们可以在容器中设置 white-space: nowrap; 和 overflow: hidden;，从而达到一行显示的效果。