Set text beyond 2 lines to display as ellipsis
In designing front-end pages, we often encounter situations where the text is too long and exceeds the specified area.
We just need to set the following styles in the text:
html page:
<div class="context">
<span class="item">
(随便拷贝的) 一天,我发现,一只黑蜘蛛在后院的两檐之间结了一张很大的网。难道蜘蛛会飞?要不,从这个檐头到那个檐头,中间有一丈余宽,第一根线是怎么拉过去的?后来,我发现蜘蛛走了许多弯路--从一个檐头起,打结,顺墙而下,一步一步向前爬,小心翼翼,翘起尾部,不让丝沾到地面的沙石或别的物体上,走过空地,再爬上对面的檐头,高度差不多了,再把丝收紧,以后也是如此。
</span>
</div>
css style
.context {
width: 300px;
height: 400px;
.item {
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
-webkit-line-clamp:2; //限制行数
overflow:hidden; //超出部分隐藏
text-overflow:ellipsis; //用一个省略号代替超出的内容
}
}