纯css实现单行、多行文字过长显示省略号的方法

我们在做网站的时候，有的地方经常要用到截取文字显示省略号的时候，对于单行的文字，css就可以实现，全兼容的方法。

一、单行文字显示省略号css如下：

.class{ width:300px; white-space:nowrap; text-overflow:ellipsis;overflow:hidden; }

说明：

1、宽度一定要设置。

2、white-space:nowrap是禁止文字折行。

3、text-overflow表示当文本溢出时是否显示省略标记，有两个值：

   clip：不显示省略标记（…），而是简单的裁切。
   ellipsis：当对象内文本溢出时显示省略标记（…）

4、overflow:hidden表示溢出内容为隐藏。 

二、对于多行文字溢出显示省略号的方法

这里我们使用的css3的属性来实现。不过此方式只适合支持webKit浏览器的。代码如下：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;

1、display: -webkit-box   必须要使用的属性 ，先将对象作为弹性伸缩盒子模型来显示 。

2、-webkit-box-orient   这个也是必须要使用的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

3、-webkit-line-clamp   用来限制在一个块元素显示的文本的行数。 当然它需要组合-webkit-box-orient和display: -webkit-box的。

4、text-overflow: ellipsis  可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

.ui-box{ 
   	width: 300px; 
   	height: 90px; 
   	margin: 0 auto; 
   	position: relative; 
   	line-height: 30px;
   	overflow: hidden;
   	border: 1px solid #dcdcdc;
   	padding: 0 20px
}
.ui-box:after{ 
   	content: '...'; 
   	position: absolute; 
   	bottom: 6px; 
   	right: 20px; 
   	z-index: 100;
   	background: -webkit-linear-gradient(left, transparent, #fff 50%);
	background: -moz-linear-gradient(left, transparent, #fff 50% );
	background: linear-gradient(left, transparent, #fff 50% );
	padding-left: 20px;
}

效果：