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

热身,单行省略

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

/* 原理:设置文字不换行,溢出后隐藏,截断显示省略符 */
.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

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

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

逐一来看,首先是预留位置,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 自定义多行省略:从原理到实现的更多相关文章

  1. 黑科技:CSS定制多行省略

    转载请注明出处:http://hai.li/2017/03/08/css-multiline-overflow-ellipsis.html 什么是多行省略? 当字数多到一定程度就显示省略号点点点.最初 ...

  2. 纯CSS实现多行文字垂直居中几种方法解析

    场景:父元素 高度固定,如何使其中的文字垂直居中? 1.table布局: 利用display:table+display:table-cell的方法 <!DOCTYPE html> < ...

  3. ZH奶酪:纯CSS自定义Html中Checkbox复选框样式

    原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变 ...

  4. vue.单选和多选,纯css自定义单选框样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 自定义常用input表单元素二:纯css实现自定义radio单选按钮

    这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...

  6. 黑科技:纯CSS定制文本省略

    作者:weilong,腾讯 web前端开发 工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest导读 拿到设计MM的设计稿,Oh NO,点点点后面又双叒叕加内容了,弹丸 ...

  7. 关于瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)

    瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...

  8. css多行省略

    单行省略就不用说了,用css实现非常简单,兼容性还非常好.但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 ... 代替,且不说好不好,万一哪天PM说要改成 ...

  9. 你不知道的css高级应用三种方法——实现多行省略

    前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正 ...

随机推荐

  1. PHPCMS V9轻松完成WAP手机网站搭建全教程

    ---恢复内容开始--- 应用PHPCMS V9轻松完成WAP手机网站搭建全教程 用PHPCMS最新发布的V9搭建了PHPCMS研究中心网站(http://www.17huiyi.net)完成后,有用 ...

  2. 1.4redis小结--队列在抢购活动的实现思路

    思路:采用 客户队列,抢购结果队列,库存队列 1.1用户排队 <?php //连接本地的 Redis 服务 $redis = new Redis(); $redis->connect('1 ...

  3. [转载]提升SQLite数据插入效率低、速度慢的方法

    转载地址:http://blog.csdn.net/chenguanzhou123/article/details/9376537#,如果有侵犯原创,请留言告知,本人会及时删除. 前言 SQLite数 ...

  4. requests + 正则表达式 获取 ‘猫眼电影top100’。

    使用 进程池Pool 提高爬取数据的速度. 1 # !/usr/bin/python 2 # -*- coding:utf-8 -*- 3 import requests 4 from request ...

  5. python3之工程中必须依赖的__init__.py

    1.  __init__.py 1.1  什么是__init__.py 在Python3工程里,当python3检测到一个目录下存在__init__.py文件时,Python3就会把它当成一个模块(m ...

  6. 一、mybatis入门案例

    今天学习了mybatis框架,简单记录一下mybatis第一个入门案例,目标是使用Mybatis作为持久层框架,执行查询数据的SQL语句并且获取结果集 基本步骤: 物理建模 逻辑建模 引入依赖 创建持 ...

  7. (STAR-CCM+教程)001 软件安装以及界面介绍

    STAR-CCM+是西门子公司旗下产出的一款CFD软件,因其强大的多面体网格划分功能.简易的操作流程被广泛应用于工程计算以及科研工作中. 学习资源 个人在使用STAR-CCM+过程中,主要参考资料来源 ...

  8. 洛谷2120 [ZJOI2007]仓库建设(斜率优化dp)

    感觉和锯木厂那个题很类似的. 其实这个题还那个题唯一的区别就是\(dp\)转移式子中的\(f\)变成了\(g\) qwq不想多说了 直接看我的前一篇题解吧qwq #include<iostrea ...

  9. bzoj2037 Sue的小球(区间dp,考虑到对未来的贡献)

    ​​​​​​​​​​​​​​大致意思就是现在你要不断的奔跑到不同的地点去接球,每一秒可以移动一个单位长度,而你接到一个球的动作是瞬间的,收益是y[i]-t*v[i] 然后呢,要求分数最高. 起初看这个 ...

  10. 数据库已经存在表, django使用inspectdb反向生成model实体类

    1.通过inspectdb处理类,可以将现有数据库里的一个或者多个.全部数据库表生成Django model实体类 python manage.py inspectdb --database defa ...