CSS 布局 - 文本截断

2019-07-18

描述

如果文本的长度大于一行，那么他将在第 n 行被一个渐变的效果截断。

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;
}

Demo

说明

1. overflow: hidden 可以阻止文本溢出他的范围（对于一个块元素来说，宽度为 100%，高度为 auto）
2. white-space: nowrap 阻止文本超过一行的高度
3. text-overflow: ellipsis 如果文本超过了自身设定的范围，将在末尾处使用省略号
4. width: 200px; 确保元素有一个宽度范围，以便知道在什么位置使用省略号

浏览器支持

支持率：99.8%
支持情况：https://caniuse.com/#feat=text-overflow
⚠️：仅对单行元素生效，多行可使用

.line-clamp {
  word-break: break-all;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

返回总目录

每天 30 秒系列之 CSS