下面有更多 "亲自试一试" 示例。
这个text-overflow
属性指定如何向用户发出未显示的溢出内容的信号。它可以被剪裁、显示省略号 (...) 或显示自定义字符串。
文本溢出需要以下两个属性:
表中的数字指定完全支持该属性的第一个浏览器版本。
后跟 -o- 的数字指定使用前缀的第一个版本。
Property | |||||
---|---|---|---|---|---|
text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
text-overflow: clip|ellipsis|
string|initial|inherit;
Value | Description | Demo |
---|---|---|
clip | Default value. The text is clipped and not accessible | Demo ❯ |
ellipsis | Render an ellipsis ("...") to represent the clipped text | Demo ❯ |
string | Render the given string to represent the clipped text | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
具有悬停效果的文本溢出(悬停时显示整个文本):
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
亲自试一试 »
CSS教程:CSS 文本效果
HTML DOM 参考:textOverflow 属性
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!