纯CSS实现文字超过n行后省略功能

在切图阶段，经常会遇到，设计稿要求超出n行后剩余文字省略，并用...代替的需求。类似于下图

纯CSS实现文字超过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;
}

实现的效果

纯CSS实现文字超过n行后省略功能

[update]
Firefox有兼容性问题，不过可以通过设置max-height加overflow: hidden;来达到超出隐藏效果，只是没有省略号了。算是弥补兼容问题吧。

纯CSS实现文字超过n行后省略功能

单行文字

多行文字

demo

相关推荐