---

HTML 文本省略號

超行省略號如何實現

標準答案：

1. 單行文本溢出顯示省略號

.ellipsis-single {white-space: nowrap; /* 文本不換行 */overflow: hidden; /* 溢出隱藏 */text-overflow: ellipsis; /* 顯示省略號 */width: 200px; /* 必須設置寬度 */
}

2. 多行文本溢出顯示省略號

方法一：使用 -webkit-line-clamp（推薦）

.ellipsis-multi {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; /* 顯示行數 */overflow: hidden;text-overflow: ellipsis;width: 200px; /* 必須設置寬度 */
}

方法二：使用偽元素（兼容性好）

.ellipsis-multi-compatible {position: relative;height: 4.5em; /* 行高 × 行數 */line-height: 1.5em;overflow: hidden;
}.ellipsis-multi-compatible::after {content: '...';position: absolute;bottom: 0;right: 0;padding-left: 40px;background: linear-gradient(to right, transparent, #fff 55%);
}

方法三：使用 JavaScript 動態監測

function truncateText(element, maxLines) {const lineHeight = parseInt(window.getComputedStyle(element).lineHeight)const maxHeight = lineHeight * maxLineswhile (element.scrollHeight > maxHeight) {element.textContent = element.textContent.slice(0, -1)}element.textContent += '...'
}

3. 響應式文本省略

.responsive-ellipsis {width: 100%;max-width: 300px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}@media (max-width: 768px) {.responsive-ellipsis {max-width: 200px;}
}

4. 自定義省略號樣式

.custom-ellipsis {position: relative;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}.custom-ellipsis::after {content: '...';position: absolute;right: 0;bottom: 0;color: #ff0000; /* 自定義省略號顏色 */font-weight: bold; /* 自定義省略號樣式 */
}

5. 表格單元格文本省略

.table-cell-ellipsis {max-width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

6. 注意事項

1. 寬度設置：

   • 必須設置容器寬度
   • 可以使用固定寬度或百分比
   • 考慮響應式布局需求

2. 兼容性處理：

   • -webkit-line-clamp 需要添加瀏覽器前綴
   • 考慮降級方案
   • 使用 JavaScript 方案作為備選

3. 性能優化：

   • 避免頻繁的 DOM 操作
   • 使用 CSS 方案優先
   • JavaScript 方案考慮防抖處理

4. 特殊場景：

   • 動態內容更新
   • 多語言支持
   • 不同字體大小適配

7. 常見問題解決

1. 省略號不顯示：

   • 檢查容器寬度是否設置
   • 確認文本是否超出容器
   • 驗證 CSS 屬性是否正確

2. 多行省略不生效：

   • 檢查 -webkit-line-clamp 兼容性
   • 確認父元素高度設置
   • 驗證文本內容是否足夠長

3. 響應式適配問題：

   • 使用相對單位
   • 添加媒體查詢
   • 考慮容器自適應

8. 最佳實踐

1. CSS 方案優先：

   • 優先使用 CSS 實現
   • 代碼簡潔，性能好
   • 維護成本低

2. 降級處理：

   • 提供合適的降級方案
   • 保證基本功能可用
   • 考慮用戶體驗

3. 響應式設計：

   • 適配不同屏幕尺寸
   • 考慮不同設備特性
   • 保持布局穩定性

4. 性能考慮：

   • 避免不必要的計算
   • 合理使用緩存
   • 優化重繪和回流