如何添加截断代码 - CSS

有时候我们需要限制某个元素的内容长度，以保证排版不会因为过长的文字而出现问题。这时候我们可以使用CSS中的截断代码（text-overflow）来实现。

代码实现

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

• white-space: nowrap; 设置元素内的文本不换行。
• overflow: hidden; 隐藏溢出的部分。
• text-overflow: ellipsis; 在文本溢出时用省略号来代替。

示例

HTML代码：

<div class="truncate">这是一段需要截断的长段落，希望可以通过CSS实现。</div>

效果如下：

注意事项

• 截断代码只适用于单行元素。
• 只有当元素的宽度小于其内容宽度时才会发生截断，否则截断代码不会生效。
• 截断代码需要在块级元素内使用，否则会出现奇怪的错误。