CSS文字超出後隱藏並顯示省略號及其他瀏覽器相容方案(推薦)

廢話不多說，先上程式碼！

1.只顯示一行文字後隱藏並省略

// 只顯示一行文字後省略.element {
	width: 300px; /* 需要設定一個固定寬度 */
	white-space: nowrap; /* 強制單行顯示，不換行 */
	overflow: hidden; /* 超出盒子部分隱藏 */
	text-overflow: ellipsis; /* 超出部分顯示省略號 */
}

2、顯示指定行數文字後隱藏並省略

// 顯示多行文字後省略.element {
width: 300px; /* 需要設定一個固定寬度 */
display: -webkit-box; /* 使用彈性盒佈局 */
-webkit-box-orient: vertical; /* 垂直排列 */
-webkit-line-clamp: 3; /* 顯示三行 */
overflow: hidden; /* 超出盒子部分隱藏 */
text-overflow: ellipsis; /* 超出部分顯示省略號 */
}

多行文字省略，透過使用display: -webkit-box;彈性盒子佈局，配合-webkit-line-clamp實現多行文字截斷。
附註：這套方法適用於WebKit 核心瀏覽器（如Chrome、Safari 等）。對於其他瀏覽器，可能需要額外的polyfill 支援。

其他解決方案

1、使用JavaScript 動態地計算文字內容的高度並進行截斷。

2、使用已有的函式庫：如：Clamp.js
Clamp.js：一個輕量級的函式庫，用於實作跨瀏覽器的多行文字截斷。

 //單行$clamp(myHeader, {clamp: 1});
//多行$clamp(myHeader, {clamp: 3});
//根據可用高度自動計算行數$clamp(myParagraph, {clamp: 'auto'});
//依照固定高度自動計算行數$clamp(myParagraph, {clamp: '35px'});

3、CSS Fallback（部分相容方案）
對於某些瀏覽器，雖然沒有直接支援-webkit-line-clamp的屬性，但我們可以結合一些簡單的CSS 來實現近似效果。

 .element {
display: block; /* 顯示為區塊 */
overflow: hidden; /* 隱藏超出內容 */
text-overflow: ellipsis; /* 超出部分顯示省略號 */
line-height: 1.5em; /* 設定行高 */
max-height: 4.5em; /* 3行的最大高度，3行 * 1.5行高 = 4.5em */
white-space: normal; /* 保持正常的文字換行 */
}

這種方案雖然無法在所有情況下實現精確的多行截斷，但在支援基本的多行文字省略顯示方面仍然適用。

到此這篇關於CSS文本超出後隱藏並顯示省略號及其他瀏覽器兼容方案的文章就介紹到這了,更多相關CSS文本超出隱藏內容請搜索downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持downcodes.com！