CSS3 text-overflow 属性
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;
,从而达到一行显示的效果。