CSS实现文本溢出省略号显示的功能(两行文本)

实现这个功能需要注意两点:

1.设置文本框的高度

2.高度为行高的整数倍,显示两行,则高度为行高的2倍

需要用到的代码

display: -webkit-box; / 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示/ 

-webkit-box-orient: vertical;/ 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式/ 

-webkit-line-clamp: 2;/ 显示两行 /

overflow: hidden;/  超出部分隐藏 /

实际操作:

代码:

CSS部分:

.box{

width:300px;

height: 340px;

}

.img{

width: 300px;

height: 300px;

background: #ebebeb;

}

.text{

width: 300px;

height: 40px;

line-height: 20px;

font-size: 14px;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;  

}

效果图:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容