當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【css】文字溢出，显示省略符号（...）

發布時間：2024/9/19 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了【css】文字溢出，显示省略符号（...）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

CSS3
文字溢出，顯示省略符號需要區分情況進行處理：可分為單行和多行的情況。

單行文字溢出

假設有這樣的需求，如圖：

那么可以用如下代碼實現：

<!DOCTYPE html> <html> <head> <style> div.test { white-space:nowrap; width:12em; overflow:hidden; text-overflow:ellipsis; border:1px solid #000000; } </style></head><body><p>div中完整的內容為 "文字溢出說三遍文字溢出說三遍文字溢出說三遍" ：</p><div class="test">文字溢出說三遍文字溢出說三遍文字溢出說三遍</div></body> </html>

實現功能的核心代碼為：

div.test { white-space:nowrap; width:12em; overflow:hidden; text-overflow:ellipsis; border:1px solid #000000; }

說明:

white-space:nowrap;含義為段落中的文本不進行換行
width:12em;含義為div的寬度，目的是讓文字顯示不全（只能顯示12個文字）
overflow:hidden;含義為溢出的部分就不顯示了
text-overflow:ellipsis;含義為顯示省略符號來代表被修剪的文本。

這些組合到一起的含義為：當文字溢出時，顯示省略號。

多行文字溢出

需求是防不勝防的，有可能會遇到這樣的需求：文字只顯示3行，溢出文字用省略號代表，如圖：

那么可以用如下代碼實現：

<!DOCTYPE html> <html> <head> <style> div.test { width:5em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; border:1px solid #000000; } </style></head><body><p>div中完整的內容為 "文字溢出說三遍文字溢出說三遍文字溢出說三遍" ：</p><div class="test">文字溢出說三遍文字溢出說三遍文字溢出說三遍</div></body> </html>

實現功能的核心代碼為：

div.test { width:5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; border:1px solid #000000; }

說明:

width:5em;規定div的寬度，目的是讓文字顯示行數超過3行（一行只能顯示5個文字）
overflow:hidden;含義為溢出的部分就不顯示了
display: -webkit-box;含義為將對象作為彈性伸縮盒子模型顯示。但，這是chrome/safari（-webkit)瀏覽器的私有屬性。出了chrome/safari瀏覽器，可能會不好用，可能會不好用，可能會不好用。
-webkit-box-orient: vertical;含義為垂直排列，方向是從上向下。
-webkit-line-clamp: 3;含義為顯示3文字。相當于變相的設置高度。

這些組合到一起的含義為：文字只顯示3行，溢出文字用省略號代表。

處理英文時，需要加點料

如果用上面的方法處理英文時，當遇到長單詞時會失效，比如這種：

<!DOCTYPE html> <html> <head> <style> div.test { width:5em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; border:1px solid #000000; } </style></head><body><p>div中完整的內容為 "wo shi henchanghenchangdedanci wo shi henchanghenchangdedanci wo shi henchanghenchangdedanci" ：</p><div class="test">wo shi henchanghenchangdedanci wo shi henchanghenchangdedanci wo shi henchanghenchangdedanci</div></body> </html>

這時需要添加上下面的代碼：

word-wrap:break-word; word-break:break-all;

說明:

word-wrap:break-word;含義為不得以時，將長單詞（也可以是URL）從內部進行換行
word-break:break-all;含義為不講條件的將長單詞（也可以是URL）從內部進行換行

word-break:break-all;

div.test { width:5em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; word-break:break-all; border:1px solid #000000; }

word-wrap:break-word;

div.test { width:5em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; word-wrap:break-word; border:1px solid #000000; }

使用clamp.js也可以處理文字溢出

略。

再說一下多行文字溢出

不加overflow: hidden;

指定高度

div.test { width:5em; height:10em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; border:1px solid #000000; }

參考

html在線運行https://www.runoob.com/runcode
https://www.w3school.com.cn/cssref/pr_text-overflow.asp
https://www.w3school.com.cn/cssref/pr_text_white-space.asp
https://www.cnblogs.com/linsimei/p/7273353.html
https://blog.csdn.net/u010651696/article/details/99291677
https://www.cnblogs.com/ldlx-mars/p/6972734.html
https://blog.csdn.net/chensonghuiyuan/article/details/49204747
https://blog.csdn.net/qq_26983555/article/details/80175428

總結

以上是生活随笔為你收集整理的【css】文字溢出，显示省略符号（...）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：还用鼠标在Excel里拖来拖去，太笨了！
下一篇：三季度PC市场联想优势依旧，重压下的惠普