Css基础——溢出文字省略号表达

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

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




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

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




<div class="ellipsis">这是一段很长的文本，将会在超出容器宽度时显示省略号。</div>

在这个例子中，当文本内容超出<div>元素的宽度时，溢出的部分会被省略号...替代。