css文本溢出处理

css文本溢出处理

1. 处理单行溢出

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

verflow 属性规定当内容溢出元素框时发生的事情 hidden值表示隐藏溢出后的文本
white-space 属性设置如何处理元素内的空白 nowrap值可以理解为不允许文本换行去填充底下的空白部分
text-overflow 属性规定当文本溢出包含元素时发生的事情 ellipsis值表示显示省略符号来代表被修剪的文本
2. 处理多行溢出

p {
　　position: relative;
　　line-height: 1.4em;
　　height: 4.2em;
　　overflow: hidden;

}

p::after {
　　content: "...";
　　font-weight: bold;
　　position: absolute;
　　bottom: 0;
　　right: 0;
　　padding: 0 20px 1px 45px;
　　background: url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}

这里注意几点：
height高度正好是line-height的3倍；
结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用…去模拟；
要支持IE8，需要将::after替换成:after；

转载，原文链接。