css实现文本溢出显示省略号

看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾。今天就说说单行文本,多行文本溢出时怎么显示省略号?

单行

overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;

多行

display: -webkit-box; /*将对象作为弹性伸缩盒子模型展示*/
-webkit-box-orient: vertical; /*是用来伸缩盒子对象的子元素的排列方式*/
-webkit-line-clamp: 3; /*是用来限制一个块元素现在文本的行数*/
overflow: hidden;

刚刚看了下简书首页文章列表里面,li里面就有...,而我这样写是没有的,只是显示出来有省略号,所以我觉得可以截取固定字数再加一个省略号作为li标签里面的文本这样是不是就会好多了。

猜你喜欢

转载自www.cnblogs.com/sunshine21/p/10181376.html
今日推荐