当前位置:首页 > 开发教程 > Web前端 >

css截取字符串显示两行或多行,多余文字用省略号显示

时间:2016-05-05 09:51 来源:互联网 作者:源码搜藏 收藏

首先说明下单行的省略显示,相信大家差不多都知道,代码如下a.name{line-height: 30px;text-align: center;text-overflow:ellipsis;//让超出的用...实现white-space:nowrap;//禁止换行overflow:hidden;//超出的隐藏display: block;}那么显示两行或者多行,再
首先说明下单行的省略显示,相信大家差不多都知道,代码如下
a.name{
	line-height: 30px;
	text-align: center;
	text-overflow:ellipsis;//让超出的用...实现
	white-space:nowrap;//禁止换行
	overflow:hidden;//超出的隐藏
	display: block;
}

那么显示两行或者多行,再把多余的文字省略,又是怎么实现的呢,很多人都说css只能实现单行的,多行的没法实现,我没有放弃,最终还是找到了实现的方法,这里分享给大家,代码如下:
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;  //可以设置显示多行
-webkit-box-orient: vertical;

自己测试了下 谷歌浏览器显示正常,其他的没有测试,大家可以去试试。

Web前端阅读排行

最新文章