css字太多了省略_纯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

其中，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;来达到超出隐藏效果，只是没有省略号了。算是弥补兼容问题吧。