兼容ie的文字超出显示省略号

兼容ie的文字超出显示省略号

单行文本的溢出显示省略号： (需要加宽度width兼容部分浏览器)

overflow: hidden;    //  超出隐藏
text-overflow:ellipsis; // 显示省略符号来代表被修剪的文本。
white-space: nowrap; // 强制文字一行显示

• 属性：text-overflow:ellipsis;

text-overflow：取值clip | ellipsis | string;

 text-overflow 属性规定当文本溢出包含元素时发生的事情。默认值clip，不会继承
clip：修剪文本。仅超出隐藏。
ellipsis：显示省略符号来代表被修剪的文本。超出隐藏显示省略号。
string：用给定的字符串替换被修剪的文本。

多行文本显示省略号：（只适用webkit内核的浏览器及移动端）

display: -webkit-box;  
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;//  超出隐藏

• 属性：text-overflow:ellipsis

display: -webkit-box;

css3新添加的盒子模型属性,属性规定父盒子的子元素是否可伸缩其尺寸，text-overflow 属性规定当文本溢出包含元素时发生的事情。默认值clip，不会继承
属性值：
	 box-flex 属性:目前没有浏览器支持，作为代替
	Firefox 支持替代的 -moz-box-flex 属性。
	Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。
	IE 不支持 box-flex 属性。

-webkit-box-orient: vertical;

水平方向从左到右，垂直方向从上到下，box-direction和box-ordinal-group 能够改变这种顺序。
这个就跟flex布局的排列概念很相似了。

	box-flex 属性:目前没有浏览器支持，作为代替
	Firefox 支持替代的 -moz-box-orient 属性。
	Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient  属性。
	IE 不支持 box-flex 属性。

取值：
horizontal：在水平行中从左向右排列子元素。
vertical：从上向下垂直排列子元素。
inline-axis：沿着行内轴来排列子元素（映射为 horizontal）。。
block-axis：沿着块轴来排列子元素（映射为 vertical）。
inherit：从父元素继承 box-orient 属性的值。

-webkit-line-clamp: 3;限制在一个块元素显示的文本的行数。（仅webkit内核的浏览器及移动端支持）；

适配各种浏览器的多行兼容：

div {   // 超出两行显示省略号
  position: relative;
  line-height: 24px;
  max-height:48px;
 overflow: hidden;
}
div::after {
 content: "...";
 position: absolute;
 bottom: 0;
 right: 8px;
 padding-left: 30px;
 background: -webkit-linear-gradient(left, transparent, #fff 50%);
 background: -o-linear-gradient(right, transparent, #fff 50%);
 background: -moz-linear-gradient(right, transparent, #fff 50%);
  background: linear-gradient(to right, transparent, #fff 50%);
}

注意：

• 原理是将超出的部分隐藏，再使用伪元素的背景渐变效果遮住最后显示的文字以呈现省略号的效果。
• IE6-7不显示content内容，要添加标签包裹…（如：…）；
• ie8需要将::after替换成:after。
• 高度最好是行高的整倍数，避免文字显示不全