css效果(2)-文本溢出显示省略号，文本两端对齐，格子背景

文本溢出显示省略号

单行文本
width:150px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本
width:150px;
overflow:hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

代码演示

	
		
		
		
	
	
		
单行文本溢出显示省略号效果！
		
多行文本溢出显示省略号效果！多行文本溢出显示省略号效果！多行文本溢出显示省略号效果！
	

IE上面显示效果：

谷歌上面显示效果：

文本两端对齐效果

//非IE
text-align-last:justify;
-moz-text-align-last: justify ;
-webkit-text-align-last:justify;
//IE
text-align:justify;
text-align-last:justify;
text-justify:inter-ideograph;

效果：

格子背景，占位图

background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
background-position: 0 0, 20px 20px;
background-size: 40px 40px;

效果：