CSS text-overflow:ellipsis 實現單行文字溢出顯示省略號完整教學

核心結論

要實現「單行文字超寬度顯示省略號」，必須同時設定三個 CSS 屬性：

.ellipsis {
    white-space: nowrap;      /* 強制不換行 */
    overflow: hidden;         /* 隱藏溢出內容 */
    text-overflow: ellipsis;  /* 溢出處顯示省略號 */
    width: 200px;             /* 必須有寬度限制 */
}

逐屬性驗證

完整範例

<div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;">
    a b c d e f g h i j k l , msa sd sd sa w df f
</div>

渲染結果：a b c d e f g h i j k l , msa sd sd sa w df f 會在 100px 處截斷並顯示 ...。

應用場景與注意事項

• 適用於表格欄位、導航列、卡片標題等固定寬度區塊。
• 僅支援單行文字；多行省略需使用 -webkit-line-clamp（WebKit 瀏覽器）或 JS 方案。
• 容器必須有明確寬度（或由父層決定），否則無法觸發溢出。
• text-overflow 僅為「顯示提示」，本身不具備截斷能力，需配合 overflow 與 white-space。

延伸：多行文字省略（WebKit 專屬）

.multi-line-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 顯示 3 行 */
    overflow: hidden;
}

非 WebKit 瀏覽器需採用 JavaScript 計算高度截斷。