单行文本
<div class="singleline">如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来实现</div>
.singleline{
width: 200px;
height: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
多行文本
方案一:
<div class="multiline">在webkit浏览器中可以使用-webkit-line-clamp、-webkit-box-orient配合display: -webkit-box使用。-webkit-line-clamp表示限制显示的行数;-webkit-box-orient表示元素是水平还是垂直布局其内容。</div>
.multiline{
width: 200px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
方案二:
使用float
<div class="multiline-float">
<div class="text">
随着众多科技企业的成功,中国的信息技术及下一个阶段的智能技术已经处于高速增长。也就是说,除了繁荣的互联网所带来的开发者数量需求,随着技术的创新,开发者质量的需求也越来越大。甚至,会有很多的新技术是由中国开发者创造并影响世界的。然而,中国开发者现在并没有一个地方去沉淀、生产、分享、学习技术内容,而这就是我做掘金的社区的原因。
</div>
<div class="holder"></div>
<div class="more-icon">...</div>
</div>
.multiline-float{
width: 100%;
height: 4.5em;
font-size: 14px;
line-height: 1.5em;
overflow: hidden;
}
.multiline-float .text{
width: 100%;
float: right;
margin-left: -3em;
}
.multiline-float .holder{
width: 3em;
height: 100%;
float: right;
}
.multiline-float .more-icon{
width: 3em;
height: 1.5em;
float: right;
position: relative;
left: 100%;
transform: translate(-100%, -100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%);
text-align: right;
}