用纯CSS实现多行省略效果的实际操作过程

发布时间：2023-09-22 09:51:17 所属栏目：语言来源：

导读：这篇文章我们来了解“如何用纯CSS实现多行省略的效果”的内容，小编通过实际的案例向大家展示了操作过程，简单易懂，有需要的朋友可以参考了解看看，那么接下来就跟随小编的思路来往下学习吧，希望对大家学

这篇文章我们来了解“如何用纯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;
}

这样一来就给了占位盒子空间，它会浮动到左边，和文字盒排在一排，文字盒的高度小于占位盒高度，此时第一排高度为占位盒子高度，第一排没有多余空间，我们自定义的省略盒子只能排在第二排。试想一下，当文字盒的高度大于占位盒高度时，会发生什么？

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!