如何使用 CSS 截断文本?

CSS HTML 盒模型 text-overflow overflow line-clamp 优雅降级 inline

在很多UI设计中会限制文本长度,这时需要我们适当地截断文本显示省略号。 同时响应式布局也要求动态的文本长度,在大屏幕中显示较长文本,而在小屏幕中显示较少文本。 显然用CSS比JS能够更简洁地完成这项工作。 下文介绍了对单行/多行文本如何进行截断,以及何种情况下截断不起作用。先看图:

@2x

text-overflow

text-overflow: ellipsis属性作用于块级元素,当文本溢出时显示省略号。 要注意的是,设置ellipsis的同时需要禁止换行,并隐藏溢出部分:

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

什么是块级元素?参考:CSS Display属性与盒模型

line-clamp

有时我们希望显示两行文本,第二行溢出部分显示省略号。怎么办呢? 其实这在理论上是不可能办到的,标准CSS并未提供这样的行为。 但我们可以在webkit浏览器中近似实现,并在其他浏览器中优雅降级。 下图中显示了三行文本:

line clamp

需要设置display-webkit-box以及方向为纵向, 然后使用-webkit-line-clamp来只显示三行文本,溢出部分会显示为省略号。 在非webkit内核的浏览器中降级:设置max-height并使用overflow:hidden隐藏溢出部分。

.ellip-block{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* degradation */
  height: 52px;
  overflow: hidden;
}

行内元素截断

text-overflow只作用于块级元素,所以我们给一个display:inline|inline-block 的元素设置该属性是无效的。例如:

<!--span默认以inline显示-->
<span class="ellip">Cras vestibulum erat ultrices neque. Praesent rhoncus</span>

什么是块级元素/行内元素?参考:CSS Line Box:块级元素与行内元素

为了达到截断效果,我们可以给<span>的上层块级元素设置text-overflow,比如一个<div>

<div class="ellip">
  <span>Cras vestibulum erat ultrices neque. Praesent rhoncus</span>
</div>

除了行内元素,ellipsis元素里面的浮动元素也是不会被截断的。

Harttle

致力于简单的、一致的、高效的前端开发

看看这个?