css效果(2)-文本溢出显示省略号，文本两端对齐，格子背景_文字两端对齐 ,文字超出显示省略号,文字压省略号-CSDN博客

本文链接：https://blog.csdn.net/ygkyufcl/article/details/114008539

文本溢出显示省略号

单行文本
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;

代码演示

<!DOCTYPE html>
<html>
	<head>
		<style>
		.p1,.p2{width:150px;overflow:hidden;text-overflow: ellipsis;position:relative;}
		.p1{white-space: nowrap;}
		.p2{writing-mode: vertical-rl;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;height:54px;line-height:18px;}
		@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
			/* IE10+ CSS styles go here */
			.p2:after {content:'...';position:absolute;right:0;bottom:1px;width:16px;text-align:center;background:#fff;}
		}
		</style>
		
		<!--[if IE]>
			<style>
				/* IE9及低于IE9 */
				.p2:after {content:'...';position:absolute;right:0;bottom:1px;width:18px;text-align:center;background:#fff;}
			</style>
		<![endif]-->
	</head>
	<body>
		<p class='p1'>单行文本溢出显示省略号效果！</p>
		<p class='p2'>多行文本溢出显示省略号效果！多行文本溢出显示省略号效果！多行文本溢出显示省略号效果！</p>
	</body>
</html>

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;

效果：
格子背景