纯 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盒子模型详解
Apr 24 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 HTML / CSS
CSS作用域(样式分割)的使用汇总
使用CSS实现小三角边框原理解析
CSS实现切角+边框+投影+内容背景色渐变效果
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
You might like
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
Js的MessageBox
2006/12/03 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python服务器端收发请求的实现代码
2014/09/29 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
python实现代码统计程序
2019/09/19 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
Python如何用filter函数筛选数据
2020/03/05 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
cf战队收人广告词
2014/03/14 职场文书
感恩的演讲稿
2014/05/06 职场文书
读书之星事迹材料
2014/05/12 职场文书
政府采购方案
2014/06/12 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
2015年校长新年寄语
2014/12/08 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
初中政治教学工作总结
2015/08/13 职场文书
高中运动会广播稿
2015/08/19 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis