CSS 奇技淫巧 | 巧妙实现文本不定行数截断
Hello,大家好,我是 Coco,今天又是一篇 CSS 的奇技淫巧。由阅文前端 XboxYan 投稿,授权原创转发。原文地址:https://juejin.cn/post/7022876094608982030。
正文从下面开始。
偶然发现,在某乎热榜页[1]有一个很有意思的布局,这里的标题会制约内容的行数,所以文本超出是不定行的。详细规则如下:
整个容器高度是固定的,标题和内容总共 3 行
标题最多2行,超出省略
内容由剩余空间决定,如果标题占2行,则内容超出1行省略;如果标题占1行,则内容超出2行省略
是不是很灵(离)活(谱)的交互?可以充分利用页面空间,保证标题和内容都能展示出来,示意如下
看了下原站的实现,是通过 js 判断标题高度,然后动态添加一个类名实现的。不过呢,经过一番琢磨,这里也是可以纯 CSS 实现的,一起来看看吧
一、标题超出省略
假设有这样一段 HTML
<div class="section"><h3 class="title">LGD 在 TI10 放猛犸,RNG 在 S7 放加里奥最后都输了,哪个更让你愤怒失望?</h3><p class="excerpt">猛犸是对面的绝中绝,大家都知道,并且之前扳回两局已经证明了,当lgd选择ban掉猛犸,或者自己抢掉猛犸时,对面完全不是对手。</p >
</div>
标题的规则是超出2行省略,这个简单,直接用**-webkit-line-clamp **实现
.title{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}
超出2行就会自动省略了
二、内容自适应行数
由于整个高度是固定的,如果让内容部分自适应剩余空间是不是就实现了呢?提到自适应剩余空间,可以马上想到 flex 布局,所以可以这样来实现:
.section{display: flex;overflow: hidden;height: 72px;/*定一个高度*/flex-direction: column;
}
.excerpt{flex: 1; /*自适应剩余空间*/overflow: hidden;
}
这样借助flex: 1;overflow: hidden;
就几乎实现了想要的效果,如下
已经很完美,只是现在超出还没有省略号,接着往下看
三、不定行超出省略
一般情况,-webkit-line-clamp
适用于行数确定的情况下,现在行数不定,有时是 1 行,有时是 2 行,如何处理呢?这里就需要一些奇技淫巧了。大家可能还记得这篇文章 CSS 实现多行文本“展开收起” - 掘金 (juejin.cn)[2],里面就提到了如何使用浮动来实现文本超出省略的效果,有兴趣的可以参考一下。
1. 右下角环绕效果
首先添加一个伪元素,设置右浮动
.excerpt::before{content: '...';float: right;
}
很明显省略号目前是在右上角的,现在需要挪到右下角来,之前的操作是通过一个浮动元素把这个省略号挤下来,但是需要额外的占位元素
这里再介绍一种新的方式,借助 CSS shapes 布局[3]实现!
首先,将省略号高度撑满,并居下对齐,可以用 flex 实现
.excerpt::before{content: '...';float: right;height: 100%;display: flex;align-items: flex-end;
}
这样省略号虽然到了右下角,但是上面的部分也被挤走了,没有达到环绕的效果。这时就可以用 shapes 布局了,不了解这个布局的,可以参考一下 张鑫旭 的这篇文章:写给自己看的CSS shapes布局教程 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)[4]
这里仅仅只需要利用到 shape-outside:inset()
就可以了,表示以自身为边界,然后上、右、下、左四个方向分别向内缩进的距离。比如这里需要缩进到靠近省略号位置,所以
.excerpt::before{/*其他样式**/shape-outside: inset(calc(100% - 1.5em) 0 0);
}
效果如下
去除背景,可以看到省略号完美的环绕在右下角
2. 自动隐藏省略号
现在还有一个问题,需要文本较少时隐藏省略号,该如何实现呢?可以试试 “CSS 障眼法”
简单来说,就是用一个足够大的色块盖住省略号,设置绝对定位后,色块是跟随内容文本的,所以在文字较多时,色块也跟随文本挤下去了,实现如下
.excerpt::after{content: '';position: absolute;width: 999vh;height: 999vh;background: #fff;
}
原理示意如下
个别极端情况可能会遮挡不住,比如
没关系,可以随便找个东西补上,比如 box-shadow
,往左下角偏移一点就可以了
.excerpt::after{content: '';position: absolute;width: 999vh;height: 999vh;background: #fff;box-shadow: -2em 2em #fff; /*左下的阴影*/
}
设置和底色相同的颜色后,最终的效果如下
这样就实现了文章开头某乎的交互效果,完整代码可访问 auto-clamp (codepen.io)[5]
四、总结和说明
以上实现了一个不定行数的文本截断效果,融合了许多 CSS 小技巧,除了 shapes 布局以外(当然也可以采用其他方式实现),没有太多陌生的属性,下面简单总结一下:
多行省略直接使用 -webkit-line-clamp,现代浏览器都支持
flex 布局可以很方便的处理剩余空间
float + shapes 布局也可以实现右下角环绕效果
box-shadow 在障眼法中很常见
适当积累一些 CSS 奇技淫巧,有时候会帮上大忙
在我看来,布局的事情当然最好由 CSS 解决,实现更灵活,渲染更迅速,没有框架限制,无需等待 dom 加载,无需 JS 计算尺寸,无需遍历节点,好处太多了。如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发❤❤❤
参考资料
[1]
某乎热榜页: https://www.zhihu.com/hot
[2]
CSS 实现多行文本“展开收起” - 掘金 (juejin.cn): https://juejin.cn/post/6963904955262435336
[3]
CSS shapes 布局: https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside
[4]
写给自己看的CSS shapes布局教程 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com): https://www.zhangxinxu.com/wordpress/2019/02/css-css3-shapes/
[5]
auto-clamp (codepen.io): https://codepen.io/xboxyan/pen/zYdozbv
iCSS,不止于 CSS,如果你也对各种新奇有趣的前端(CSS)知识感兴趣,欢迎关注 。同时如果你有任何想法疑问,欢迎加我的微信 「coco1s 」,一起探讨!
后台回复:typescript,获取我写的 typescript 系列文章,绝对精品
后台回复:电子书,自动获取我为大家整理的大量经典电子书,省去你筛选以及下载的时间
后台回复:不一样的前端,自动获取精选优质前端文章。
后台回复:算法,自动获取精选算法文章。另外也可关注我的另外一个专注算法的公众号力扣加加。
后台回复:每日一荐,自动获取我为大家总结的每日一荐月刊,内含精品文章,实用技巧,高效工具等等
CSS 奇技淫巧 | 巧妙实现文本不定行数截断相关推荐
- CSS 实现文本“不定行数“截断
偶然发现,在某乎热榜页有一个很有意思的布局,这里的标题会制约内容的行数,所以文本超出是"不定行"的.详细规则如下: 整个容器高度是固定的,标题和内容总共 3 行 标题最多2行,超出 ...
- CSS 限制文本显示行数
文章目录 CSS限制文本显示行数 假设需求 解决方案 CSS样式 示例Demo 浏览器页面效果 CSS限制文本显示行数 假设需求 有若干段文本内容,要显示在一个盒子内,宽高限制: 要求只能显示5行, ...
- css3实现超出文本指定行数(指定文本长度)用省略号代替
测试代码: 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta name="viewport" c ...
- 判断文本的行数c语言,软件工程统计文件中字符串个数,单词个数,词频,行数
一.前言 在之前写过一个词频统计的C语言课设,别人说你一个大三的怎么写C语言课程,我只想说我是先学习VB,VB是我编程语言的开始,然后接触到C语言及C++:再后来我是学习C++,然后反过来学习C语言, ...
- Text-detector 一个用来检测文本内容行数和字数的Mini工具
分享一个昨天抽闲自己瞎搞的一个Text-detector: 一个用来检测文本内容行数和字数的Mini工具 代码挺简单的,先看一下运行结果吧: 用户输入指定路径的.txt文件,开始进行检索.检索的过程我 ...
- android 根据文本计算行数,ios 获取Text行数和每行显示的内容
该方法主要使用了CoreText中的内容,了解更多CoreText的内容请看CoreText系列 下面是具体代码 - (NSArray *)getLinesArrayOfStringInLabel:( ...
- css textarea行数_超级简单:在一个TextArea中如何限制行数和字符数-阿里云开发者社区...
在网上,已经有很多关于在一个textbox限制允许的字符数量.但是如果需要,在textbox中如何去统计和限制行数呢.这里有一个解决方案,使用客户端的Javascript去限制TextArea的内容为 ...
- css textarea行数_超级简单:在一个TextArea中如何限制行数和字符数
阅读: 1586 评论: 13 作者: 麒麟 发表于 2009-12-21 09:00 原文链接 在网上,已经有很多关于在一个textbox限制允许的字符数量.但是如果需要,在textbox中如何去统 ...
- linux查看单词个数,Linux怎么统计文本的的行数/单词数和字符数?
Linux怎么统计文本的的行数/单词数和字符数? Linux系统中想要统计文本的行数.单词和字符数量,该怎么统计呢?我们可以使用SecureCRT来统计,下面我们就来看看详细的教程. 1.启动Linu ...
最新文章
- 令人头疼的字符编码的问题
- 这款 IDE 插件再次升级,让「小程序云」的开发部署提速 8 倍
- HDU D Tree [点分治]
- 开发MapReduce程序
- 阅读《第31次中国互联网络发展状况统计报告》,分析中国互联网发展趋势和特点...
- CDH集群异常处理ERROR Failure due to stall on seeded torrent.、重装时hdfs提示目录已存在、CDH重启不正常
- Quick BI V4.0功能“炸弹”来袭,重磅推出即席分析、模板市场、企业微信免密登录等强势功能
- Spark算子篇 --Spark算子之combineByKey详解
- redis linux 运行依赖,在Ubuntu系统下安装Redis Desktop Manager的方法
- bzoj4558[JLoi2016]方 容斥+count
- PostGreSql学习笔记002---Navicat Premium中管理PostGreSql 错误:字段rolcatupdate 不存在
- POJ - 2485(最小生成树.prime)
- 自适应滤波器(二)NLMS自适应滤波器
- python局域网大文件_利用Python+pyftpdlib实现在局域网中互传文件
- html班级管理,谈小学班级管理
- 抖音,5.5亿!未来十年的流量入口,视频百科全书的梦,会成为现实吗?
- 移动直播明争暗战五年:人性、梦想与资本的碰撞
- 【fread/fwrite】C语言API之fread/fwrite函数详解
- [SMOJ1810]基因测试
- 大数据技术原理与应用(第二章 大数据处理架构Hadoop)
热门文章
- 高通进入不同模式的命令
- 思维私塾——LeetCode16.最接近的三数之和
- 蒲公英Ghost Win 7 Sp1(x86/x64)旗舰版 201910
- rgb ALPHA_8、ARGB_4444、ARGB_8888和RGB_565的区别
- 机器人最新天赋符文天赋加点图_英雄联盟机器人最新天赋和符文加点
- 软件构造博客——LSP原则
- EOS向400亿美元的以太坊发起了进攻
- 16. DICOM图像显示-DCMTK-cda转dicom
- iOS 逆向初探防护(fishHOOK防护)
- 如何使用vb通过outlook收发邮件