Blog

在對網頁的文本進行排版時，一般情況下網頁自動分行文本。當需要處理大量文本字串時，為了讓排版可以保持一致使網頁看起來更整齊，便需要對文本的顯示長度進行限制，使溢出的文本截斷並透過…符號修飾。今天阿健將介紹2種方法來處理文本因溢出而導致佈局問題。

單行顯示的處理方法

要將溢出的文本調整為單行，需要結合overflow、white-space跟text-overflow這3種CSS屬性，讓我們先個別介紹這些屬性:

overflow

The overflow CSS shorthand property sets the desired behavior for an element’s overflow — i.e. when an element’s content is too big to fit in its block formatting context — in both directions.

MDN-overflow

設定值:

visible	讓內容直接超出範圍，不使用捲軸
hidden	隱藏超出的內容
scroll	自動產生捲軸
auto	自動的預設，產生自動捲軸

white-space

The white-space CSS property sets how white space inside an element is handled.

MDN-white-space

normal	連續的空白字元會被合併(collapse)，換行字元被視為空白字元。換行只在被文字空間限制時發生。
nowrap	對待空白字元的方式跟 normal 一樣，且會強制不換行。
pre	連續的空白字元都會被保留。換行在有換行字元以及<br>時發生。
pre-wrap	連續的空白字元都會被保留。換行會在換行字元、有<br>元素以及被文字空間限制時發生。
pre-line	連續的空白字元會被合併(collapse)。換行在換行字元、 <br>以及被文字空間限制時發生。

text-overflow

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (‘…‘), or display a custom string.

MDN-text-overflow

clip	截斷超出的範圍文本
ellipsis	用…來表示被截斷的文本

實現單行顯示的邏輯

實現的邏輯如下:

• 設定顯示文本的範圍區塊，並設定overflow為hidden使超出區塊的文本隱藏。
• 設定white-space屬性為nowrap，使文本不換行。
• 設定text-overflow屬性為ellipsis，使超出範圍區塊的文本被截斷，並以…顯示。

CSS樣式如下:

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

例子:

See the Pen CSS 將溢出的文字改為單行顯示 by chieninker (@chieninker) on CodePen.

多行的顯示的處理方法

注意這個屬性只有單行能使用，而且必須在 display: block 之下的才可以，有依照此規則的的引擎之下可以使用 -webkit-line-clamp ，設定要保留的行數，但必須搭配其他屬性像以下這麼做：

雖然可以透過text-overflow的ellipsis截斷文本，但它只能截斷第一行的文本，如果需要在多行(如文本的第3行)截斷文本，便需要使用line-clamp屬性。

這邊需要注意一點，目前瀏覽器還沒有全部支援line-clamp屬性，但可以在 webkit 的引擎下使用-webkit-line-clamp，設定值為要保留的行數，並再搭配其他3個CSS屬性，具體如下:

display: -webkit-box;
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical;  
overflow: hidden;

例子:

See the Pen line-clamp Demo by chieninker (@chieninker) on CodePen.

參考資料

MDN-overflow
MDN-white-space
MDN-text-overflow
MDN–webkit-line-clamp
How To Prevent Line Breaks Using CSS
css-tricks:line-clamp