日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

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

發布時間：2024/9/19 29 豆豆
生活随笔 收集整理的這篇文章主要介紹了 【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; }

推薦的寫法

div.test { width:5em; overflow: hidden; display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-line-clamp: 3; -moz-line-clamp: 3; line-clamp: 3; word-wrap:break-word; word-break:break-all; }

說明：

  • -moz代表firefox瀏覽器私有屬性，-ms代表IE瀏覽器私有屬性，-webkit代表chrome/safari私有屬性，-o代表opera私有屬性私有屬
  • display: -webkit-box; display: -moz-box; display: box; 含義為支持firefox、chrome/safari、CSS3標準（萬一瀏覽器都支持CSS3了呢，所以放上display: box;吧）。
  • line-clamp: 3;網上說這個屬性CSS3中未定義。萬一CSS4中有呢，還是先寫上吧。

全文完。

參考

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】文字溢出，显示省略符号（...）的全部內容，希望文章能夠幫你解決所遇到的問題。

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