[分享]css3文本只显示两行

CSS3是前端开发中的一项重要技术，可以实现许多有趣的效果。其中，文本只显示两行也是一项很实用的技巧，可以帮助页面达到更好的排版效果，同时也可以提高用户体验。具体实现该效果的方法很简单，只需要在对应的...

CSS3是前端开发中的一项重要技术，可以实现许多有趣的效果。其中，文本只显示两行也是一项很实用的技巧，可以帮助页面达到更好的排版效果，同时也可以提高用户体验。

具体实现该效果的方法很简单，只需要在对应的文本块中添加以下CSS样式即可：

.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
} 

其中，各个属性的作用分别如下：

• overflow: hidden：超出文本区域的部分隐藏
• text-overflow: ellipsis：文本超出部分显示省略号
• display: -webkit-box：设置字符串必须基于一个块容器计算
• -webkit-line-clamp: 2：限制文本显示的行数
• -webkit-box-orient: vertical：设置块容器内部元素排列方式为垂直排列

通过以上代码，我们就可以实现文本只显示两行的效果了。这一技巧可以应用于各种场景中，如在博客中显示文章摘要，或者在商品列表中显示产品简介等。