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

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

1）三個屬性：

1

overflow: hidden;
2text-overflow: ellipsis;
3white-space: nowrap;
4overflow: hidden和white-space: nowrap都是必須的否則不會顯示省略號；

2）網上張大神想出來的margin-top負值的辦法：

<

div 
class
="box"
>
<
div 
class
="wz"
>文字內容
div>
<
div 
class
="dot"
>...
div>
div>

css:

.box.wz.dot

這種方法應該是相容所有的瀏覽器。

還有用js或者外掛程式來解決的方法，感覺有點麻煩。

2.兩行顯示，第二行出現省略號

當文字強制兩行顯示，並且在第二行才出現省略號。解決辦法：

overflow: hidden;

text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

相容性不太好，多用於手機端。-webkit-line-clamp: 3;就是表示第幾行才顯示省略號。

超出部分省略號

單行省略 overflow hidden text overflow ellipsis white space nowrap 多行省略 display webkit box webkit box orient vertical webkit line clamp 3 overflow hidden ...

css超出部分省略號

本文 如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來，當然還需要加寬度width屬來相容部分瀏覽。p效果如下 你好 單行省略號測試，省略部分 p效果如下 你好 單行省略號測試，省.略部分呢,測測測測測測測測 試測試測試測試測試試試 因使用了web...

CSS超出部分省略號

1，單行文字實現超出部分省略號 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 2，多行文字實現超出部分省略號 overflow hidden text overflow ellipsi...