如何在 CSS 中使用文本溢出属性？

在网页设计中，经常会出现文本超出容器的情况，这时候我们可以使用 CSS 中的文本溢出属性来处理。

text-overflow 属性：

text-overflow 属性用于控制文本溢出容器后如何处理。它只有在以下两个 CSS 属性配合使用时才能生效：

• white-space: nowrap; 用于让文本不换行；
• overflow: hidden; 用于隐藏超出容器范围的部分。

语法：

text-overflow: clip|ellipsis|string;

• clip：默认值，裁剪文本（直接隐藏）；
• ellipsis：使用省略号代替被修剪的文本；
• string：使用自定义字符串代替被修剪的文本。

实例：

.container {
  width: 200px;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

上述代码演示了使用 ellipsis 进行文本超出容器部分的省略。

总结：

文本溢出属性 text-overflow，可以使超出容器范围的文本进行剪裁或者用省略号或自定义字符串进行替代。在使用时，一定要注意配合 white-space 和 overflow 属性使用，才能起到正确作用。