css text-overflow样式

"text-overflow" 样式用于控制当文本溢出其容器时如何显示文本内容。

语法如下：

text-overflow: clip|ellipsis|string|initial|inherit;
其中，“clip”表示将溢出的文本内容裁剪掉并隐藏；“ellipsis”表示将溢出的文本内容以省略号(...)的形式显示；“string”表示将溢出的文本内容以指定字符串的形式显示；“initial”表示将样式设置为默认值；“inherit”表示继承父元素的样式。

例如，要将一个带有固定宽度和高度的容器内的文本溢出时以省略号的形式显示，可以使用以下样式：

div {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出的文本 */
text-overflow: ellipsis; /* 以省略号的形式显示溢出的文本 */
}

要将溢出的文本以指定字符串的形式显示，可以将“string”替换为要显示的字符串：

div {
white-space: nowrap;
overflow: hidden;
text-overflow: " >>"; /* 以 " >>" 的形式显示溢出的文本 */
}

请注意，“text-overflow”样式仅适用于单行文本。如果需要处理多行文本溢出的情况，可以使用 JavaScript 或者其他技术来实现。

相关词：