霍者博客

CSS实现多行文本溢出显示省略号

单行文本溢出显示省略号---(前提要给固定宽度)

实现方法:

overflow:hidden; /*--超出隐藏--*/
white-space:nowrap; /*--禁止换行--*/
text-overflow:ellipsis; /*--超出的文字以省略号显示--*/

多行文本溢出显示省略号

实现方法:

display:-webkit-box; /*--课伸缩盒子/弹性盒子--*/
-webkit-box-orient:vertical;/*--从上向下垂直排列子元素--*/
-webkit-line-clamp:3;/*--限制在一个块元素显示的文本的行数(超出3行显示省略号)--*/
overflow:hidden;

适用范围:

因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端

兼容写法:(通过定位的方式)

p{
width:200px;/*自己定义宽度*/
position: relative;
line-height: 20px;/*行高*/
max-height: 40px;/*这里是是行高的几倍就表示显示几行文本*/
overflow: hidden;
}
p::after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/592.html,标题:CSS实现多行文本溢出显示省略号

【我来说两句】
分享到:

相关文章:


CSS4激动人心的新特性及浏览器支持度  (2017-3-6 7:0:0)

CSS font-weight 属性  (2017-1-25 6:8:17)

只使用CSS如何禁止选中文字,而不是JS  (2016-12-26 7:11:36)

如何设置CSS里元素垂直居中效果  (2016-12-20 6:14:14)

CSS样式表知识点回顾  (2016-4-24 8:7:20)

CSS​样式文件命名规范  (2016-4-21 9:49:45)

word-wrap&word-break的区别  (2016-4-18 11:0:26)

CSS盒子浮动 float  (2016-4-17 10:9:14)

CSS空间定位z-index空间定位  (2016-4-17 8:20:0)

CSS文字样式  (2016-4-17 8:0:48)


评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。