使用CSS样式设置文本超出2行显示为省略号

设置文本超出2行显示为省略号

在设计前端页面中，我们经常会遇到文本太长导致超出规定区域的情况。
我们只需要在文本中设置以下样式即可解决该问题：
html页面：

<div class="context">
	<span class="item">
	(随便拷贝的) 一天，我发现，一只黑蜘蛛在后院的两檐之间结了一张很大的网。难道蜘蛛会飞？要不，从这个檐头到那个檐头，中间有一丈余宽，第一根线是怎么拉过去的？后来，我发现蜘蛛走了许多弯路--从一个檐头起，打结，顺墙而下，一步一步向前爬，小心翼翼，翘起尾部，不让丝沾到地面的沙石或别的物体上，走过空地，再爬上对面的檐头，高度差不多了，再把丝收紧，以后也是如此。
	</span>
</div>

css样式

.context {
    
    
	width: 300px;
	height: 400px;
	
	.item {
    
    
		display:-webkit-box;         //将对象作为弹性伸缩盒子模型显示。
		-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
		-webkit-line-clamp:2;        //限制行数
		overflow:hidden;             //超出部分隐藏
		text-overflow:ellipsis;      //用一个省略号代替超出的内容
	}
}

希望能够帮到你！