CSS 內容超出顯示省略號
文章目錄
- CSS 內容超出顯示省略號
- **1. 單行文本省略（常用）**
- **2. 多行文本省略（如 2 行）**
- **3. 對非塊級元素生效**
- **完整示例**
- **注意事項**
在 CSS 中實現內容超出顯示省略號，主要通過控制文本溢出行為來實現。以下是不同場景下的實現方法：
1. 單行文本省略（常用）
.ellipsis {width: 200px; /* 必須設置固定寬度或最大寬度 */overflow: hidden; /* 隱藏溢出內容 */white-space: nowrap; /* 強制文本不換行 */text-overflow: ellipsis; /* 超出部分顯示省略號 */
}
關鍵點：
width或max-width必須明確（否則容器無法判斷何時溢出）。white-space: nowrap強制文本單行顯示。text-overflow: ellipsis需配合overflow: hidden使用。
2. 多行文本省略（如 2 行）
.multiline-ellipsis {width: 200px;display: -webkit-box; /* 使用舊版彈性盒子模型 */-webkit-box-orient: vertical; /* 內容垂直排列 */-webkit-line-clamp: 2; /* 限制顯示行數 */overflow: hidden; /* 隱藏溢出內容 */
}
注意：
- 這是
-webkit-私有屬性，兼容性有限（主要支持 WebKit 內核瀏覽器，如 Chrome/Safari）。 - 不支持 Firefox 和 IE，需根據項目需求謹慎使用。
3. 對非塊級元素生效
若元素默認是行內元素（如 <span>），需添加 display: block 或 inline-block：
span.ellipsis {display: inline-block; /* 或 block */width: 100px;overflow: hidden;white-space: nowrap;/* 強制文本不換行 */text-overflow: ellipsis;
}
完整示例
<!DOCTYPE html>
<style>.single-line {width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;border: 1px solid #ccc;}.multi-line {width: 200px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;border: 1px solid #ccc;}
</style><!-- 單行省略 -->
<div class="single-line">這是一段非常非常非常非常非常非常非常長的單行文本</div><!-- 多行省略 -->
<div class="multi-line">這是一段非常非常非常非常非常非常非常長的多行文本，這里的內容會在第二行末尾截斷并顯示省略號。</div>
注意事項
- 單行省略：廣泛兼容所有現代瀏覽器。
- 多行省略：推薦在移動端或 WebKit 內核環境使用，其他場景可考慮后端截斷或 JavaScript 方案。
- 容器尺寸：務必明確容器的寬度（單行）或高度（多行），否則無法觸發溢出效果。
：推薦在移動端或 WebKit 內核環境使用，其他場景可考慮后端截斷或 JavaScript 方案。
- 容器尺寸：務必明確容器的寬度（單行）或高度（多行），否則無法觸發溢出效果。
根據需求選擇合適方案，單行場景推薦優先使用 text-overflow: ellipsis。
