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;

效果：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！