CSS溢出換行詳解

一、CSS內容超出換行

CSS內容溢出換行，是指在文本內容太長或寬度不足以顯示全部內容時，可以通過設置css屬性來控制內容換行與溢出。比較常用的屬性包括：

• overflow：控制元素中超出部分的顯示方式（visible, hidden, scroll, auto）;
• text-overflow：超出部分的顯示方式（ellipsis，clip）;
• white-space：控制文本如何顯示空格及換行符（normal, nowrap, pre, pre-line, pre-wrap）;

<div style="width:100px; height:50px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
  <p>這是一段長文本，但是我只想顯示一行。</p>
</div>

上述代碼中，設置了div的寬度為100px，高度為50px，超出部分被隱藏（overflow:hidden），同時超出部分用省略號表示（text-overflow:ellipsis），文本內容不允許換行（white-space:nowrap）。

其他屬性也可根據具體需求進行設置，比如將文本內容強制折行（white-space:pre-wrap）。

二、CSS超出部分換行

CSS超出部分是否換行也是需要考慮的問題，常用的屬性包括：

• word-break：控制單詞的換行（normal, break-all, keep-all）;
• word-wrap：控制換行符的位置（normal, break-word）；
• hyphens：控制單詞連字符（none, manual, auto）；

<div style="width:100px; height:50px; word-break:break-all; word-wrap:break-word;">
  <p>這是一段長單詞supercalifragilisticexpialidocious，要求在寬度不足的情況下自動換行。</p>
</div>

上述代碼中，設置了div的寬度為100px，高度為50px，超出部分自動換行（word-break:break-all，word-wrap:break-word），這樣在寬度不足的情況下，單詞會自動換行，而不會出現在兩行中間被截斷的情況。

三、CSS溢出換行的適用場景

沒必要為了滿足個性化的設計需求而盲目使用CSS溢出換行，技術本身並沒有優劣之分，關鍵在於需求是否真正需要。常見的適用場景包括：

• 展示列表中的標題，如果傳入的標題過長，通過CSS設置相應的屬性實現換行展示;
• 在卡片式布局中，可以通過限制卡片的寬度，並通過換行控制文字的展示，避免因文字過多導致卡片過大;
• 在移動端等場景中，錄入的數據可能比較長，通過設置合適的屬性控制溢出和換行，可以提高頁面的用戶體驗。

總之，使用CSS溢出換行需要綜合考慮布局、使用場景以及用戶體驗等多方面因素，才能達到最優的效果。