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;就是表示第几行才显示省略号。

转载于:https://www.cnblogs.com/zjjDaily/p/5956380.html