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

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

热身，单行省略

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

/* 原理：设置文字不换行，溢出后隐藏，截断显示省略符 */
.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

标签：box,浮动,盒子,自定义,行省,省略,line,CSS
来源： https://www.cnblogs.com/houxianzhou/p/15522839.html