常用的css样式-文本溢出隐藏

常用的css样式-文本篇

1.单行文本溢出隐藏显示省略号

p{
 	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

2.多行文本溢出隐藏显示省略号

p{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; //多行文本溢出行数
	overflow: hidden;
}

注：
1.将height设置为line-height的整数倍，防止超出的文字露出。
2.给p::after添加渐变背景可避免文字只显示一半。
3.由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：…）；兼容ie8需要将::after替换成:after。