CSS text-overflow 属性
实例
使用 text-overflow 属性：
div
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
亲自试一试 »
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
下面有更多实例。
定义和用法
text-overflow 属性指定如何向用户发送未显示的溢出内容。它可以被剪裁，显示省略号（…），或显示自定义字符串。
文本溢出需要以下两个属性:
- white-space: nowrap;
- overflow: hidden;
| 默认值: | clip |
|---|---|
| 继承性: | no |
| 支持动画: | no. 阅读有关动画的信息 |
| 版本: | CSS3 |
| JavaScript 语法: | object.style.textOverflow="ellipsis" 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
数字后跟 -o- 指定使用前缀的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
语法
text-overflow: clip|ellipsis|string|initial|inherit;
属性值
| 值 | 描述 | 试一试 |
|---|---|---|
| clip | 默认值。文本已剪裁，无法访问 | 亲自试一试 » |
| ellipsis | 呈现省略号 ("...") 表示剪裁文本的步骤 | 亲自试一试 » |
| string | 呈现给定字符串以表示剪裁的文本 | |
| initial | 将此属性设置为其默认值。请参阅 initial | 亲自试一试 » |
| inherit | 从其父元素继承此属性。请参阅 inherit |
更多实例
实例
带有悬停效果的文本溢出（悬停时显示整个文本）：
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
亲自试一试 »
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
相关页面
CSS 教程: CSS Text Effects
HTML DOM 参考手册: textOverflow 属性
