多行溢出

工作中需要显示多行字的段落时，如果有更多的信息隐藏掉，如果是单行，可以用下面的css实现：

1
2
3
4
height:16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

现在要求实现多行，如果是webkit内核，可以用下面的代码实现：

1
2
3
4
5
6
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-height: 22px;

如果不想要用hack的方式，或者不是只支持webkit内核的话，可以用一个div遮挡段落的末尾的那个字，再用···替换即可。这个方法的弊端在于，一定会加……，而对于不满足加点的div显示是不对的。还需要另外再用js帮助判断是否溢出。

具体实现如下：

code-pen

HTML

1
2
3
<div class="detail">这里是需要分行后显示的地方。。。。。。这里是分需要分行
  <div class="append">阅读更多</div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.detail {
  display:block;
  position:relative;
  width:100px;
  height:3.2rem;
  line-height:1.6;
  overflow:hidden;
}
.append{
  display:block;
  position:absolute;
  width:2rem;
  height:1.1rem;
  right:3px;
  bottom:5px;
  background-color:white;
  color:black;
}