纯 CSS 自定义多行省略：从原理到实现

Posted 2021-11-08 喆星高照

文字溢出怎么展示，你的需求是什么？单行还是多行？截断，省略，自定义样式，自适应高度？在这里你都能找到答案。接下来我会由浅入深，从原理到实现，带你一步步揭开多行省略的面纱。我们先从最简单的单行溢出省略开始，

热身，单行省略

这是一个全宇宙统一的方案，没有太多的魔法

/* 原理：设置文字不换行，溢出后隐藏，截断显示省略符 */
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

如何实现多行省略呢？先从最简单的 line-clamp 开始吧。

最简单的多行省略，line-clamp

通过 CSS 属性 -webkit-line-clamp 可以把块容器中的内容限制为指定的行数

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

属性的 -webkit 前缀告诉我们事情似乎并不简单。是的，它只支持基于 webkit 内核的浏览器，这对于移动端是很友好的，在 安卓 2.3+，IOS 5.0+ 的设备上你可以直接将上述代码直接扔进去没啥问题，但如果要在 PC 端使用，需要关注下兼容性问题，

 

 除了 PC 兼容性问题，line-clamp 的方案也不支持自定义省略样式，如果需要在省略符后面加文字，箭头等自定义样式，我们可能就得考虑其他方案了，比如：浮动。

 

神奇的 float，浮动

什么！浮动也能实现多行省略？是的，下面我们用三个浮动盒子来模拟多行省略。首先准备三个盒子（文字盒，占位盒，自定义样式的省略盒）向右浮动，为了方便理解原理，我们给盒子增加不同的背景色，

 

<div class="box">
  <!-- 文字盒子 -->
  <div class="box__text">腾讯以技术丰富互联网用户的生活。通过通信及社交软件微信和 QQ 促进用户联系，并助其连接数字内容和生活服务，尽在弹指间。</div>
  <!-- 占位盒子 -->
  <div class="box__placeholder"></div>
  <!-- 自定义省略盒子 -->
  <div class="box__more">...展开</div>
</div>

<style>
  .box__text {
    width: 100%;
    height: 60px;
    line-height: 20px;
    background-color: pink;
    float: right;
  }

  .box__placeholder {
    width: 60px;
    height: 60px;
    background-color: gray;
    opacity: 0.8;
    float: right;
  }

  .box__more {
    width: 60px;
    text-align: right;
    background: yellow;
    float: right;
  }
</style>

接下来开始调整位置，先给文字盒一个负的左外边距，它的值刚好为占位盒的宽度，

.box__text {
  margin-left: -60px;
}

这样一来就给了占位盒子空间，它会浮动到左边，和文字盒排在一排，

上图中，文字盒的高度小于占位盒高度，此时第一排高度为占位盒子高度，第一排没有多余空间，我们自定义的省略盒子只能排在第二排。试想一下，当文字盒的高度大于占位盒高度时（比如文字显示 4 行），会发生什么？

第一排的高度会被文字盒撑开，这个时候第一排有了多余空间，省略盒子能够挤进去。

 

Awesome

纯css实现文本内容单行/多行溢出显示省略号

一般都知道css可以实现单行溢出限制，那么多行溢出的话，css该怎么去实现了，此例主要借助css的伪元素样式去实现的，具体代码和注释如下。

​

单行超出宽度限制溢出

html代码：

<div class="text">
  css实现单行宽度限制溢出时出现省略号
</div>

css代码：

.text 
  width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 

浏览器渲染效果：

多行超出限制溢出（敲黑板！）

html代码：

<div class="text">
  多行超出宽度限制溢出时出现省略号多行超出宽度限制溢出时出现省略号多行超出宽度限制溢出时出现省略号多行超出宽度限制溢出时出现省略号多行超出宽度限制溢出时出现省略号多行超出宽度限制溢出时出现省略号多行超出宽度限制溢出时出现省略号
</div>

css代码：

.text
  width: 240px;
  overflow: hidden; /*文字超出时隐藏*/
  text-overflow: ellipsis; /*文本溢出时，显示省略符号*/
  word-break: break-all; /*英文自动换行*/


  /*webkit私有属性，仅支持webkit核*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;  /*显示行数*/


  /*根据行高来限制高度*/
  line-height: 1.5;
  height: 4.5em; /*高度等于行高的3倍*/


  position: relative; /*配合 .text:after 定位使用*/

.text:after
  content: ...;
  position: absolute;
  bottom: 0;
  right: 0;
  line-height: 1.5;
  padding: 0 2px;
  background-color: #e2e2e2; /*统一背景*/

浏览器渲染效果：

你会发现多行溢出的css代码部分比较多，这是为了兼容非webkit核的浏览器。

在移动端来说大部分手机浏览器都是webkit核的，所以也同样兼容手机上显示。

以上是关于纯 CSS 自定义多行省略：从原理到实现的主要内容，如果未能解决你的问题，请参考以下文章

纯css实现文本内容单行/多行溢出显示省略号

纯css实现省略号，兼容火狐，IE9，chrome

css实现文本溢出省略（单行/多行）

css实现文本溢出省略（单行/多行）

三探文字溢出省略：纯css实现“任意行数”截断处理

三探文字溢出省略：纯css实现“任意行数”截断处理