Div里超出部分,省略号显示
1.一行显示并出现省略号
1)三个属性:
1 overflow: hidden; 2 text-overflow: ellipsis; 3 white-space: nowrap; 4 overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号;
2)网上张大神想出来的margin-top负值的办法:
<div class="box"> <div class="wz">文字内容</div> <div class="dot">...</div> </div>
CSS:
.box{ width:设定宽度; height:设定高度; overflow:hidden; } .wz{ float:left; height:设定同样的高度; margin-right:这里的大小是给省略号留的空间; } .dot{ float:right; width:刚才留的空间大小; height:设定同样的高度; margin-top:与高度一样的值的负数; }
这种方法应该是兼容所有的浏览器。
还有用js或者插件来解决的方法,感觉有点麻烦。
2.两行显示,第二行出现省略号
当文字强制两行显示,并且在第二行才出现省略号。解决办法:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
兼容性不太好,多用于手机端。-webkit-line-clamp: 3;就是表示第几行才显示省略号。
每天进步一点点。
拜托大家转载的时候记得贴上我文章的连接,原创不容易,给条活路呗