css3新增的属性有设置文本溢出样式的,可以利用“text-overflow”属性设置文本溢出的样式;该属性用于指定当文本溢出包含文本的元素时应该如何显示,可以设置溢出后文本被裁切、显示省略号等等样式,语法为“元素{text-overflow:属性值;}”。
本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。
text-overflow属性指定当文本溢出包含它的元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (...) 或显示自定义字符串(不是所有浏览器都支持)。
text-overflow 需要配合以下两个属性使用:
white-space: nowrap;
overflow: hidden;
语法为:
text-overflow: clip|ellipsis|string|initial|inherit;
clip 剪切文本。
ellipsis 显示省略符号 ... 来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
initial 设置为属性默认值。
示例如下:
123 以下 div 容器内的文本无法完全显示,可以看到它被裁剪了。
div 使用 "text-overflow:ellipsis":
This is some long text that will not fit in the boxdiv 使用 "text-overflow:clip":
This is some long text that will not fit in the boxdiv 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):
This is some long text that will not fit in the box
输出结果:
The above is the detailed content of Does the new attribute of css3 set the text overflow style?. For more information, please follow other related articles on the PHP Chinese website!