摘要:在切图阶段,经常会遇到,设计稿要求超出行后剩余文字省略,并用代替的需求。滟滟随波千万里,何处春江无月明多行文字限制字数,并将多出字符用代替春江潮水连海平,海上明月共潮生。
在切图阶段,经常会遇到,设计稿要求超出n行后剩余文字省略,并用...代替的需求。类似于下图
单行文字单行文字时实现比较容易,使用overflow: hidden和text-overflow: ellipsis即可,其中ellipsis即省略号的意思,使用width: 10em限制横向字符数量。
多行文字多行文字主要使用的CSS属性如下:
overflow: hidden; text-overflow: ellipsis; display:-webkit-box; display:box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
其中,clamp即夹子的意思,也就是说限制两行,把内容从中间夹住。box-orient属性设置盒子的摆放方向。有点类似于flexbox中的row & coloum
demo链接https://jsbin.com/gugekes/edi...
其中,HTML为
JS Bin demo1:单行文字限制字数,并将多出字符用“...”代替
春江潮水连海平, 海上明月共潮生。 滟滟随波千万里, 何处春江无月明!demo2:多行文字限制字数,并将多出字符用“...”代替
春江潮水连海平, 海上明月共潮生。 滟滟随波千万里, 何处春江无月明! 江流宛转绕芳甸, 月照花林皆似霰; 空里流霜不觉飞, 汀上白沙看不见。 江天一色无纤尘, 皎皎空中孤月轮。 江畔何人初见月? 江月何年初照人? 人生代代无穷已, 江月年年望相似。 不知江月待何人, 但见长江送流水。 白云一片去悠悠, 青枫浦上不胜愁。 谁家今夜扁舟子? 何处相思明月楼? 可怜楼上月徘徊, 应照离人妆镜台。 玉户帘中卷不去, 捣衣砧上指还来。 此时相望不相闻, 愿逐月华流照君。 鸿雁长飞光不度, 鱼龙潜跃水成文。 昨夜闲潭梦落花
CSS为
.demo1 { width: 10em; border: 1px solid red; white-space:nowrap; overflow: hidden; text-overflow:ellipsis; } .demo2 { border: 1px solid red; overflow: hidden; text-overflow: ellipsis; display:-webkit-box; display:box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
实现的效果
[update]
Firefox有兼容性问题,不过可以通过设置max-height加overflow: hidden;来达到超出隐藏效果,只是没有省略号了。算是弥补兼容问题吧。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115515.html
摘要:本人喜欢把一些实用的东东拿过来,写成文章或者收藏起来。于是乎直接上代码狠狠的点击,查看效果吧 本人喜欢把一些实用的东东拿过来,写成文章或者收藏起来。于是乎... 直接上代码: .article { color: #000000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; ...
摘要:本人喜欢把一些实用的东东拿过来,写成文章或者收藏起来。于是乎直接上代码狠狠的点击,查看效果吧 本人喜欢把一些实用的东东拿过来,写成文章或者收藏起来。于是乎... 直接上代码: .article { color: #000000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; ...
阅读 1267·2021-11-11 10:57
阅读 3690·2021-09-07 10:10
阅读 3429·2021-08-03 14:03
阅读 3045·2019-08-30 13:45
阅读 659·2019-08-29 11:19
阅读 1019·2019-08-28 18:07
阅读 3066·2019-08-26 13:55
阅读 773·2019-08-26 12:17