纯 CSS 自定义多行省略的问题(从原理到实现)

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

热身，单行省略

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

/* 原理：设置文字不换行，溢出后隐藏，截断显示省略符 */
.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__more {
  position: relative;
  left: 100%;
  transform: translate(-100%, -100%);
}

修饰一下，去掉背景色，容器设置溢出隐藏，然后给省略盒子加个文字颜色和渐变，

.box {
  position: relative;
  overflow: hidden;
}

.box__more {
  color: #1890ff;
  background-image: linear-gradient(to left, white 40%, rgba(255, 255, 255, 0.8) 70%, transparent 100%);
}

小结一下，这里其实运用了浮动和 BFC 的原理。

外层盒子通过overflow: hidden创建一个 BFC，浮动盒子的区域不会和 BFC 重叠，计算 BFC 高度时，浮动元素也会参与计算，浮动盒会浮动到当前行的开头或结尾，再借助一些定位技术，就可以模拟多行省略的效果了。

浮动的方案的优势非常明显，

兼容性强，支持所有主流的 PC，移动端浏览器
支持自定义带渐变的文字省略样式

由于省略样式区域本质上是一个浮动盒子，所以这里我们需要通过渐变来防止穿帮，对于某些背景颜色比较复杂的区域，或者更强的一些自定义省略样式需求时（比如省略样式定义为一张箭头或图片等），这种方案开始显得力不从心了。

有没有其他方式可以实现省略样式完全的自定义呢？

有，将自定义省略盒子的位置预留出来。

那要怎么预留呢？我们可以借助line-clamp。由line-clamp截断后的省略号...刚好可以帮助我们进行占位，如果我们能通过某种办法将默认的省略号隐藏掉，再替换为我们自定义的浮动盒子，是不是就可以了！这也就是接下来我们要介绍的方案。

完全自定义，浮动 + line-clamp

我们重新整理一下上述的思路，关键的点有三个，

借助line-clamp默认的省略号，预留自定义省略盒子的位置想办法隐藏默认省略号通过定位技术替换预留位置为我们自定义的省略盒子

逐一来看，首先是预留位置，line-clamp默认省略号的大小受字号font-size的影响，所以调整字号就可以控制预留位置的大小。这里为了保证省略号的大小只受字体大小的影响，我们可以重置行高和文字间距，

.box__text {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 60px;
  line-height: 0;
  letter-spacing: 0; /* 重置了行高和文字间距，保证省略号占位只受字体大小的影响 */
  color: red; /* 为了方便演示，我们先给省略号一个颜色 */
}

这样就可以通过只调整文字盒子的字号，来控制预留省略盒子位置的大小了。由于font-size会继承，所以我们再内嵌一个子盒子来重置字号，

<div class="box__text">
    <div class="box__inner">
      腾讯以技术丰富互联网用户的生活。通过通信及社交软件微信和 QQ 促进用户联系，并助其连接数字内容和生活服务，尽在弹指间。
    </div>
</div>

<style>
  .box__inner {
    font-size: 16px;
    line-height: 20px;
    color: #000;
    vertical-align: top;
    display: inline;
  }
</style>

接下来是想办法隐藏省略号，这个比较简单，可以设置透明度或者颜色透明，

.box__text {
  opacity: 0;
  color: transparent;
}

有了省略号的预留位置后，我们要想办法将自定义省略盒子定位到预留位置，怎么办呢？还是浮动。由于设置了-webkit-line-clamp，会导致文字盒子无法撑开完整的高度，为了使用浮动来实现定位，我们可以多渲染一份文案用来撑开高度。

准备一个绝对定位的盒子，作为渲染撑开高度文案的容器，

<div class="box__abs">
    <div class="box__fake-text">
      腾讯以技术丰富互联网用户的生活。通过通信及社交软件微信和 QQ 促进用户联系，并助其连接数字内容和生活服务，尽在弹指间。
    </div>
    <div class="box__placeholder"></div>
    <div class="box__more">... 展开</div>
</div>

<style>
  .box__abs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
</style>

接着用我们前面讲的三个浮动盒子实现多行溢出省略的方式，

.box__fake-text {
  width: 100%;
  margin-left: -60px;
  line-height: 20px;
  float: right;
  color: transparent; /* 文案是为了撑开高度，配合浮动实现多行溢出省略 */
}

.box__placeholder {
  width: 60px;
  height: 60px;
  float: right;
}

.box__more {
  position: relative;
  left: 100%;
  transform: translate(-100%, -100%);
  width: 60px;
  text-align: right;
  color: #1890ff;
  float: right;
}

需要注意的是，这里的文字盒子是为了撑开高度，不需要展示，所以我们设置了颜色透明。好了，最后一步，去掉背景色，外层盒子设置溢出隐藏就是我们的最终效果，

line-clamp+ 浮动的方式可以实现省略符完全自定义，我们重置了行高和文字间距，只需要调整外层盒子的字体大小font-size就可以控制自定义省略盒子的宽度，你可以将省略盒子替换为任意的箭头，图片，折角或文字，这下再也不用担心 UI 小姐姐提需求了 ):

到此这篇关于纯 CSS 自定义多行省略的问题(从原理到实现)的文章就介绍到这了,更多相关CSS 自定义多行省略内容请搜索极客世界以前的文章或继续浏览下面的相关文章，希望大家以后多多支持极客世界！

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

10-27 六六分期app的软件客服如何联系？(六六分期

11-06 可心卡盟:win10系统火狐flash插件崩溃怎么

11-06 亲亲特价:怎么删除回收站图标

11-06 济南大学虚拟社区:鲁大师节能降温的具体办

11-06 xlueops.exe:无线网络安装向导

11-06 女斗合众国:win7系统cf与主机连接不稳定怎

11-06 0xc000022-[cf烟雾头]cf怎么调烟雾头

11-06 qizideyouhuo:应用程序无法正常启动0xc0000

11-06 ipz-185:win7系统vcf文件怎么打开

11-06 傻哥蹦迪:win10系统s4怎么打开usb调试

11-06 八神浩树gtaste:回收站清空了怎么恢复

11-06 妖尾之黑色守护:win10系统电脑没有1440x900

11-06 校园至尊魔王小说:win7系统浏览网页时字体

11-06 女斗合众国:win10系统访问共享文件夹提示请

11-06 tokyo hot n0654:恢复win7系统默认字体一招

11-06 雨酷仙境:设置win7系统转移临时文件夹腾出

11-06 阿穆纳伊之杖:win7系统开始菜单在右边还原

11-06 tunespotting:win10系统火狐flash插件总是

11-06 甘尔葛分析师：计谋网站seo关键词暴涨有什

11-06 蔡贵霖: 计谋网站seo关键词暴涨有什么秘密

11-06 博益网首页:ao3网页版进入不了解决方法

11-06 漏斗子专栏: 网站数据分析小白易懂精华篇

11-06 见证双虹怎么做:win7系统开启telnet命令的

11-06 颾狐蝶蜋:系统资源不足无法完成请求的服务

11-06 国光中学校歌:提交网站到alexa查询详细步骤

11-06 西安有情天:静态网页和动态网页的区别

11-06 红木雅尚斋:外部链接构造对网站的好处

11-06 前官礼遇：防止域名劫持–增强域安全性的10

11-06 密传二转答案: 中文分词算法有哪些

11-06 金泉家园邮编:百度快照劫持的表现及应对方

CSS作用域（样式分割）的使用汇总发布时间：2022-06-21

CSS巧用渐变实现高级感背景光动画发布时间：2022-06-21

剪的笔顺,诠释剪的笔画,认识剪的部首

1 六六分期app的软件客服如何联系？(六六分期

六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期

阅读：19817|2023-10-27

2 可心卡盟:win10系统火狐flash插件崩溃怎么

今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知

阅读：10154|2022-11-06

3 亲亲特价:怎么删除回收站图标

今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道

阅读：8423|2022-11-06

4 济南大学虚拟社区:鲁大师节能降温的具体办

今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要

阅读：8785|2022-11-06

5 xlueops.exe:无线网络安装向导

我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多

阅读：8740|2022-11-06

6 女斗合众国:win7系统cf与主机连接不稳定怎

今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不

阅读：9810|2022-11-06

7 0xc000022-[cf烟雾头]cf怎么调烟雾头

电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很

阅读：8727|2022-11-06

8 qizideyouhuo:应用程序无法正常启动0xc0000

我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法

阅读：8095|2022-11-06

9 ipz-185:win7系统vcf文件怎么打开

今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win

阅读：8771|2022-11-06

10 傻哥蹦迪:win10系统s4怎么打开usb调试

今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎

阅读：7613|2022-11-06

客服电话

电子邮件

纯 CSS 自定义多行省略的问题(从原理到实现)

热身，单行省略

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

神奇的 float，浮动

完全自定义，浮动 + line-clamp

请发表评论

全部评论

上一篇：

下一篇：

zousiyu1995/Study-LaTeX: LaTeX学习笔记

librespeed/speedtest: Self-hosted Speedt

avehtari/BDA_m_demos: Bayesian Data Anal

四维彩超怎么看性别？四维看男孩女孩诀窍

IntelliJ IDEA创建第一个Java小程序

剪的笔顺,诠释剪的笔画,认识剪的部首

六六分期app的软件客服如何联系？(六六分期

florent37/ViewAnimator: A fluent Android

florent37/Shrine-MaterialDesign2: implem

CVE-2020-36276

SimpleSoftwareIO/simple-sms: Send and re

关于我们

产品与服务

解决方案

139-2527-9053