文字溢出時，實如今末尾顯示三個點省略效果

本文轉載於:猿2048網站文字溢出時，實如今末尾顯示三個點省略效果

本文地址：ttp://www.cnblogs.com/veinyin/p/7629781.html 

 

有時咱們會有這樣的需求：當文本內容較多，寬度超出父容器時，就在最後顯示三個點，表明還有東西被摺疊起來了。以下圖

具體實現

HTML 以下

1 <div>
2     <p>我是文字我是文字我是文字我是文字</p>
3 </div>

 

div 樣式以下

1 div {
2     width: 200px;
3     margin: 100px auto;
4     border: 1px solid #CCCCCC;
5 }

簡單加了個邊框，而後居中方便截圖，而後給了個寬度，做爲文本寬度的限制

 

p 的樣式以下

1 p {
2     white-space: nowrap;
3     text-overflow: ellipsis;
4     overflow: hidden;
5 }

第 2 行表示強制在一行顯示，若是不強制在一行顯示，超出容器寬度的內容換行顯示，父容器直接被撐高，就沒有溢出了；

第 3 行表示在溢出時顯示省略標記，也就是圖中紅線圈出來的三個點，這個就沒啥好說的了；

第 4 行表示溢出部份內容隱藏，不溢出隱藏的話.... 第 3 行的溢出設置還有啥用，我都直接顯示到父容器外面了啊喂！

 

 

但有時咱們須要實現多行文本末尾摺疊，能夠使用以下方法，但兼容性較差，能夠用於移動端

@左耳_fly 提出了火狐不支持的問題，對的，在這裏聲明下，火狐和 IE 不支持的哈，截圖是 chrome 裏的 

1 p {
2     text-overflow: ellipsis;
3     overflow: hidden;
4     display: -webkit-box;
5     -webkit-line-clamp: 3;
6     -webkit-box-orient: vertical;
7 }

第 5 行爲要顯示的行數

 

 

END~~~≥ω≤