在切图阶段,经常会遇到,设计稿要求超出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;
来达到超出隐藏效果,只是没有省略号了。算是弥补兼容问题吧。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。