摘要：在切图阶段，经常会遇到，设计稿要求超出行后剩余文字省略，并用代替的需求。滟滟随波千万里，何处春江无月明多行文字限制字数，并将多出字符用代替春江潮水连海平，海上明月共潮生。
在切图阶段，经常会遇到，设计稿要求超出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; ...
阅读 1301·2021-11-11 10:57
阅读 3716·2021-09-07 10:10
阅读 3441·2021-08-03 14:03
阅读 3066·2019-08-30 13:45
阅读 679·2019-08-29 11:19
阅读 1038·2019-08-28 18:07
阅读 3098·2019-08-26 13:55
阅读 807·2019-08-26 12:17
