文本溢出显示省略号
单行文本
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;
效果: