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


Posted in HTML / CSS onNovember 11, 2021

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

热身,单行省略

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

/* 原理:设置文字不换行,溢出后隐藏,截断显示省略符 */
.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端使用,需要关注下兼容性问题,

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

除了 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 自定义多行省略内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3制作精致的照片墙特效
Jun 07 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 HTML / CSS
CSS作用域(样式分割)的使用汇总
使用CSS实现小三角边框原理解析
CSS实现切角+边框+投影+内容背景色渐变效果
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
You might like
zend framework多模块多布局配置
2011/02/26 PHP
php实现分页工具类分享
2014/01/09 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python3访问并下载网页内容的方法
2015/07/28 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
编码实现字符串转整型的函数
2012/06/02 面试题
电气专业推荐信范文
2013/11/18 职场文书
会计职业生涯规划书
2014/01/13 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
团日活动总结格式
2015/05/11 职场文书
毕业证明模板
2015/06/19 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android