CSS文本溢出截断省略

在CSS中，可以使用text-overflow属性来处理文本溢出时的显示效果。通常与white-space和overflow属性一起使用，来实现文本的截断省略。




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

在HTML中使用该类：




<div class="ellipsis">这是一段很长的文本，需要在一行内显示并且溢出的部分用省略号表示</div>

这段代码会确保长文本在单行显示，并且当文本超出其包含元素的宽度时，溢出的部分用省略号(...)表示。