CSS SNIPPET

  返回

截断超长文本  页面布局

截断超过行宽的文本并在结尾添加省略号

HTML
<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>
CSS
.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}
效果演示

If I exceed one line's width, I will be truncated.

代码说明
  1. overflow: hidden 禁止文本溢出其尺寸(对于块级元素,就是100% 宽度和自动高度)。
  2. white-space: nowrap 进制文本超出单行高度。
  3. text-overflow: ellipsis 为超过元素宽度的文本添加省略号。
  4. width: 200px; 确保元素有指定尺寸,以便计算何时进行截断。
浏览器支持

100.0%

⚠️ 仅可用于单行元素。