Css3 实现单/多行内容超出范围显示省略号

以前,网站布局只能实现单行文本显示省略号,Css3 和 Html5 出现之后,增加了很多新的特性,多行文本显示省略号也就变得相当容易。

单行文本显示省略号:

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

多行文本显示省略号:

height: 48px; // 高度
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 行数
-webkit-box-orient: vertical;

管理员

转载请注明出处!如果本博文或者本站对您(网站)的内容/素材构成侵权,请第一时间与本博主联系!

Press ESC to close