CSS 強制文字只出現一行/兩行/三行：Line-clamp 截斷與省略號實作

在網頁排版過程中，經常會遇到標題或摘要內容長度不一的情況，這會導致卡片區塊高度不齊，破壞整體的視覺平衡。如果使用後端 PHP 截斷字串，往往無法精確對應到前端容器的「行數」，因為文字寬度會隨螢幕大小改變。最理想的解法是直接在 CSS 層面處理，讓文字在超過指定行數時自動產生省略號（…）。

多行文字截斷的實作原理

目前最主流且效能最佳的做法是使用 -webkit-line-clamp 屬性。雖然它帶有 Webkit 前綴，但現在絕大多數瀏覽器（Chrome、Safari、Edge、Firefox）都已經支援。這個屬性必須搭配 display: -webkit-box 以及 -webkit-box-orient: vertical 才能生效。它的運作邏輯是將容器定義為彈性盒模型，並強制在特定的行數後切斷內容，並在最後一個字補上省略符號。

範例程式碼

/* 限制一行 */
.text-one-line, 
.text-one-line p, 
.text-one-line span, 
.text-one-line div {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    line-height: 1.5 !important;
}

/* 限制二行 */
.text-two-lines, 
.text-two-lines p, 
.text-two-lines span, 
.text-two-lines div {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    line-height: 1.5 !important;
}

/* 限制三行 */
.text-three-lines, 
.text-three-lines p, 
.text-three-lines span, 
.text-three-lines div {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    line-height: 1.5 !important;
}

程式碼邏輯拆解

• -webkit-line-clamp：這是核心參數，數字改為多少就代表限制在幾行。
• display: -webkit-box：必須將顯示模式設為舊版的 Webkit 彈性盒模型，否則限制行數的功能不會觸發。
• text-overflow: ellipsis：這是標準屬性，用來定義當文字溢出時顯示省略號。
• white-space: normal：這是一個關鍵細節，必須確保文字可以正常換行，如果被設定為 nowrap，則 line-clamp 會失效。
• overflow: hidden：確保被截斷的文字內容不會超出容器邊界。

實務踩坑提醒與建議

另外要注意的是，line-height 的設定非常重要。建議務必給予明確的數值（如 1.5），因為如果沒有設定行高，瀏覽器可能會依照預設字體計算，有時會導致最後一行字體底部被稍微削掉一點，或者在不同裝置上顯示的總高度不一致。

看不懂沒關係，照做就能用

以上的原理看不懂沒關係，只要照著下面的步驟操作就能直接套用：

操作步驟

1. 安裝並啟用 FluentSnippets 外掛
2. 新增一個 CSS 片段，並將文章中的範例程式碼貼入
3. 點擊儲存並啟用片段
4. 清除網站快取（如有使用快取外掛或 CDN）
5. 到 Elementor 編輯想要限制行數的文字元素，切換至「進階」分頁，在「CSS Classes」欄位填入對應的 class name

對應的 Class Name 列表

請根據你想限制的行數，在 Elementor 的 CSS Classes 欄位填入以下文字（不需要加點）：

• 限制一行：text-one-line
• 限制二行：text-two-lines
• 限制三行：text-three-lines