在切图阶段,经常会遇到,设计稿要求超出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 Bindemo1:单行文字限制字数,并将多出字符用“...”代替
春江潮水连海平,
海上明月共潮生。
滟滟随波千万里,
何处春江无月明!
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;来达到超出隐藏效果,只是没有省略号了。算是弥补兼容问题吧。