纯CSS实现文字超过n行后省略功能
在切图阶段，经常会遇到，设计稿要求超出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为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>demo1：单行文字限制字数，并将多出字符用“...”代替</p>
<div class="demo1">
春江潮水连海平，
海上明月共潮生。
滟滟随波千万里，
何处春江无月明!
</div>
<p>demo2：多行文字限制字数，并将多出字符用“...”代替</p>
<div class="demo2">
春江潮水连海平，
海上明月共潮生。
滟滟随波千万里，
何处春江无月明！
江流宛转绕芳甸，
月照花林皆似霰；
空里流霜不觉飞，
汀上白沙看不见。
江天一色无纤尘，
皎皎空中孤月轮。
江畔何人初见月？
江月何年初照人？
人生代代无穷已，
江月年年望相似。
不知江月待何人，
但见长江送流水。
白云一片去悠悠，
青枫浦上不胜愁。
谁家今夜扁舟子？
何处相思明月楼？
可怜楼上月徘徊，
应照离人妆镜台。
玉户帘中卷不去，
捣衣砧上指还来。
此时相望不相闻，
愿逐月华流照君。
鸿雁长飞光不度，
鱼龙潜跃水成文。
昨夜闲潭梦落花
</div>
</body>
</html>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;来达到超出隐藏效果，只是没有省略号了。算是弥补兼容问题吧。
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18