CSS文本超出后隱藏并顯示省略號及其他瀏覽器兼容方案(推薦)
發(fā)布時間：2024-09-11 15:25:01 作者：黑煤球^_^ 
我要評論
我要評論在CSS中，可以通過簡單的樣式設(shè)置實現(xiàn)文本超出隱藏并顯示省略號的效果,這些方法主要適用于WebKit內(nèi)核的瀏覽器，對于其他瀏覽器，可采用JavaScript或CSS Fallback等方案,文中還提到了Clamp.js庫，它支持跨瀏覽器的多行文本截斷功能，感興趣的朋友跟隨小編一起看看吧
廢話不多說，先上代碼！
1、只顯示一行文字后隱藏并省略
// 只顯示一行文字后省略
.element {
width: 300px; /* 需要設(shè)置一個固定寬度 */
white-space: nowrap; /* 強制單行顯示，不換行 */
overflow: hidden; /* 超出盒子部分隱藏 */
text-overflow: ellipsis; /* 超出部分顯示省略號 */
}2、顯示指定行數(shù)文字后隱藏并省略
// 顯示多行文字后省略
.element {
width: 300px; /* 需要設(shè)置一個固定寬度 */
display: -webkit-box; /* 使用彈性盒布局 */
-webkit-box-orient: vertical; /* 垂直排列 */
-webkit-line-clamp: 3; /* 顯示三行 */
overflow: hidden; /* 超出盒子部分隱藏 */
text-overflow: ellipsis; /* 超出部分顯示省略號 */
}多行文本省略，通過使用 display: -webkit-box; 彈性盒子布局，配合 -webkit-line-clamp 實現(xiàn)多行文本截斷。
注：這套方法適用于 WebKit 內(nèi)核瀏覽器（如 Chrome、Safari 等）。對于其他瀏覽器，可能需要額外的 polyfill 支持。
其他解決方案
1、使用 JavaScript 動態(tài)地計算文本內(nèi)容的高度并進(jìn)行截斷。
2、使用已有的庫：如：Clamp.js
Clamp.js：一個輕量級的庫，用于實現(xiàn)跨瀏覽器的多行文本截斷。
//單行
$clamp(myHeader, {clamp: 1});
//多行
$clamp(myHeader, {clamp: 3});
//根據(jù)可用高度自動計算行數(shù)
$clamp(myParagraph, {clamp: 'auto'});
//根據(jù)固定高度自動計算行數(shù)
$clamp(myParagraph, {clamp: '35px'});3、CSS Fallback（部分兼容方案）
對于某些瀏覽器，雖然沒有直接支持 -webkit-line-clamp 的屬性，但我們可以結(jié)合一些簡單的 CSS 來實現(xiàn)近似效果。
.element {
display: block; /* 顯示為塊 */
overflow: hidden; /* 隱藏超出內(nèi)容 */
text-overflow: ellipsis; /* 超出部分顯示省略號 */
line-height: 1.5em; /* 設(shè)置行高 */
max-height: 4.5em; /* 3行的最大高度，3行 * 1.5行高 = 4.5em */
white-space: normal; /* 保持正常的文本換行 */
}這種方案雖然無法在所有情況下實現(xiàn)精確的多行截斷，但在支持基本的多行文本省略顯示方面仍然適用。
到此這篇關(guān)于CSS文本超出后隱藏并顯示省略號及其他瀏覽器兼容方案的文章就介紹到這了,更多相關(guān)CSS文本超出隱藏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了CSS文本超出2行就隱藏并且顯示省略號的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-04-01
CSS文本超出指定寬度后隱藏并顯示為省略號的實現(xiàn)方法
下面小編就為大家?guī)硪黄狢SS文本超出指定寬度后隱藏并顯示為省略號的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-24CSS控制文本超出指定寬度顯示省略號和文本不換行效果的實現(xiàn)
下面小編就為大家?guī)硪黄狢SS控制文本超出指定寬度顯示省略號和文本不換行效果的實現(xiàn)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-05-05- 在項目中我們經(jīng)常需要在文本過長時顯示，將文本超出的部分內(nèi)容用省略號代替，基于css代碼是怎么實現(xiàn)的呢？下面腳本之家小編通過分析本文給大家詳解，感興趣的朋友一起學(xué)習(xí)2016-01-19
- li中的文本超出行寬自動隱藏，在一些新聞類的列表應(yīng)用中還是比較實用的，具體的實現(xiàn)css樣式如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-29
- 用到了width、white-space:nowrap;overflow:hidden;text-overflow:ellipsis等屬性，其中width就是指定的長度2014-09-21
CSS 超出隱藏實現(xiàn)限制字?jǐn)?shù)的功能代碼(多瀏覽器)
用時候為了有搜索引擎更喜歡網(wǎng)站，限制字?jǐn)?shù)截取標(biāo)題都是好辦法。一般用超出隱藏，以免影響了整體布局。下面是多種瀏覽器下的寫法。2009-12-21