CSS文本溢出显示省略号

在CSS中，可以使用text-overflow属性来实现文本溢出显示省略号。通常与white-space和overflow属性一起使用。

以下是实现文本溢出显示省略号的CSS样式：




.ellipsis {
  white-space: nowrap;      /* 确保文本在一行内显示 */
  overflow: hidden;         /* 隐藏溢出的内容 */
  text-overflow: ellipsis;  /* 使用省略号表示文本溢出 */
}

然后在HTML中，将这个类应用到需要显示省略号的元素上：




<div class="ellipsis">这是一段很长的文本，需要在溢出时显示省略号...</div>

这样就会在文本超出容器宽度时，文本末尾显示省略号。