CSS中的text-overflow属性详解（控制文字在一行显示，超出部分加省略号）

作者：System 时间：2024年08月07日分类：所有,css3 字数：432

CSS的text-overflow属性通常与white-space和overflow属性一起使用，来控制文本的溢出显示。它主要用来处理文本超出容器宽度时的显示情况。

当text-overflow设置为ellipsis时，当文本溢出包含它的容器时，溢出的文本会被替换为省略号(...)。




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




<div class="ellipsis">
  这是一段很长的文本，需要被截断并显示省略号。
</div>

在这个例子中，如果文本宽度超过了div的宽度，那么溢出的部分就会被省略号代替。