Div里超出部分，省略號顯示

1.一行顯示並出現省略號

1）三個屬性：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
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;就是表示第幾行才顯示省略號。