CSS 溢出省略号

CSS 溢出省略号可以在一定空间范围内限制文本内容显示长度，并用省略号(...)代替被隐藏的文本。这个效果在限制文章标题、摘要等需要显示部分文本内容的场景中经常使用。

text-overflow属性

CSS 的 text-overflow 属性可以实现文本溢出省略号的效果。该属性需要和 white-space 和 overflow 属性一起使用。

/* 需要省略的样式 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

属性说明

overflow

overflow 属性是控制元素内容溢出时的处理方式，包括 hidden（隐藏溢出内容）、visible（显示溢出内容）、scroll（强制显示滚动条）等。

white-space

white-space 属性用于设置元素内部空白区域的处理方式，包括 normal（忽略空白符）、nowrap（强制不换行）、pre-wrap（保留换行和空格）等。

text-overflow

text-overflow 属性用于控制文本溢出时的表现形式，包括 clip（裁剪）、ellipsis（省略号）等。

示例

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

上述 CSS 样式会限制p元素的宽度为100px，在该宽度内仅显示文本内容的一部分，被隐藏的部分用省略号(...)表示。

效果如下：

这里是超长的一段文本内容。

注意事项

• 该属性仅对以下元素有效：单行文本、内联元素、表格单元格。
• 该属性仅在元素定义了宽度时才有效。
• 该属性会截断被隐藏的文本，可能会影响内容的表达完整性。应谨慎使用。