CSS | text-overflow 属性

在 CSS 中，text-overflow 属性用于设置当文本内容溢出其容器时如何处理。它是一个非常有用的属性，特别是在响应式设计中。

语法

text-overflow: clip|ellipsis|string|initial|inherit;

属性值

• clip：溢出的文本内容被剪裁，不显示。
• ellipsis：溢出的文本内容以省略号表示。
• string：溢出的文本内容以指定的字符串表示。
• initial：将属性设置为其默认值。
• inherit：继承父元素的属性值。

示例

以下是三个基本示例：

text-overflow: clip;
text-overflow: ellipsis;
text-overflow: string;

clip

clip 属性将被剪切的文本部分理解为屏幕外获取不到的内容，该部分会被剪切掉，不会出现在元素的可视区域内。

#example {
  white-space: nowrap;
  width: 100px;
  overflow: hidden;
  text-overflow: clip;
}

上面的示例将溢出的文本内容从容器的右边界剪切掉。

ellipsis

当设置为 ellipsis 时，超出容器的文本内容将以省略号 ... 表示。

#example {
  white-space: nowrap;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

上面的示例将溢出的文本内容替换为省略号 ...。

string

string 属性可以将省略号替换为指定的字符串，例如：

#example {
  white-space: nowrap;
  width: 100px;
  overflow: hidden;
  text-overflow: string(' ...');
}

上面的示例将省略号替换为字符串 ' ...'。

兼容性

text-overflow 属性在现代浏览器中具有广泛的支持。厂商前缀 webkit 和 ms 已被弃用。

支持的浏览器：IE、Edge、Firefox、Chrome、Safari、Opera、iOS Safari、Android Browser、Chrome for Android 和 Firefox for Android。

结论

text-overflow 属性是使文本内容更容易处理的有用属性之一。可以使用它来剪切文本、使用省略号或替换为指定的文本。需要注意的是该属性需要与 white-space: nowrap 属性搭配使用。