01月14, 2018

css-06-多行溢出

多行溢出

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

height:16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

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

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-height: 22px;

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

具体实现如下:

HTML

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

CSS

.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;
}

本文链接:http://fengbaiyang.cn/post/multi-line-add-prefix.html

-- EOF --

Comments

暂不支持评论,如有问题,请发邮件至baiyang.feng@outlook.com。 望不吝赐教~