文字溢出怎么展示，你的需求是什么？单行还是多行？截断，省略，自定义样式，自适应高度？在这里你都能找到答案。接下来我会由浅入深，从原理到实现，带你一步步揭开多行省略的面纱。我们先从最简单的单行溢出省略开始，
热身，单行省略
这是一个全宇宙统一的方案，没有太多的魔法
/* 原理：设置文字不换行，溢出后隐藏，截断显示省略符 */
.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
