溢出文本显示省略号处理
text-overflow
当文本超出一定长度时,为了不让内容超出文本框,我们一般都是选择用text-overflow 对文本进行省略处理。
但是有的时候,我们却发现即使我们已经设置了 text-overflow 属性,但结果却没有任何效果。
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。
我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)
及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果
text-overflow: 属性规定当文本溢出包含元素时发生的事情。
默认值: | clip |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.textOverflow="ellipsis" |
值 | 描述 | |
---|---|---|
clip | 修剪文本。 | |
ellipsis | 显示省略符号来代表被修剪的文本。 | |
string | 使用给定的字符串来代表被修剪的文本。 |