css讓文字不換行

在網頁設計與開發中，我們通常需要控制頁面元素的排版和樣式，其中文字排版較為常見的一個問題就是如何使文字不換行。本文將介紹CSS中一些常見的方法，幫助你解決這個問題。

1. white-space屬性

white-space屬性決定元素盒子中的空白如何處理，它有5個值可選：normal 、nowrap、pre、pre-wrap、pre-line。它們的效果分別是：

• normal：預設值，合併多餘空白，文字不換行，文字在一行上放不下就自動換行；
• nowrap：不要換行，這相當於把normal和pre的特性結合；
• pre：保留多餘空白、不合併、不換行，如果需要換行需要手動加上`
  `；
• #pre-wrap：保留多餘空白、不合併、自動換行，如果出現需要換行的情況，則自動進行換行；
• pre-line：合併多餘空白，文字在一行上放不下就自動換行。

因此，當我們需要讓文字不自動換行時，可以使用white-space: nowrap。

div {
  white-space: nowrap;
}

當然，如果想要保留多餘空白，也可以使用其他取值。例如，如果要讓文字在一行上完整顯示，可以使用white-space: pre。

div {
  white-space: pre;
}

2. word-break屬性

在設定了white-space屬性之後，如果文字長度超過了盒子的寬度，則會進行自動換行。這時需要使用word-break屬性來控製文字的斷行，它有3個取值可選：normal、break-all、 keep-all。它們的效果分別是：

• normal：預設值，依照標準的斷詞規則，在單字之間進行斷行；
• break -all：在單字之間進行斷行，並且在英文單字內不考慮任何規則斷行；
• keep-all：在單字之間斷行，但是英文單字內不斷行。

因此，可以透過將word-break屬性的取值設為keep-all，來讓文字不進行自動換行。

div {
  white-space: nowrap;
  word-break: keep-all;
}

3. overflow屬性

在部分情況下，即使透過white-space和word-break屬性設定了正確的文字排版方式，文字長度也可能超出了盒子的寬度。這時需要使用overflow屬性來控製文字的溢出效果。 overflow屬性有4個取值可選：visible、hidden、scroll、auto。它們的效果分別是：

• visible：預設值，不做任何處理，允許內容超過盒子範圍顯示在盒子外部；
• hidden：溢出部分隱藏，不可見；
• scroll：顯示滾動條，使用者可以透過滾動條來查看超出部分;
• auto ：依實際需求顯示捲軸。

如果想讓文字在一行上顯示，不自動換行，並且溢出部分隱藏，可以結合使用white-space和overflow屬性。

div {
  white-space: nowrap;
  overflow: hidden;
}

4. text-overflow屬性

當使用overflow: hidden屬性隱藏文字溢出部分時，有可能會導致使用者看不到完整的文字內容。這時可以使用text-overflow屬性來控製文字的溢出效果。 text-overflow屬性有2個取值可選：clip、ellipsis。它們的效果分別是：

• clip：將文字截斷，並隱藏超出部分，不加入省略符號；
• ##ellipsis ：將文字截斷，並隱藏超出部分，加入省略符號（...）。

因此，可以透過將

text-overflow屬性的取值設定為ellipsis，來讓超長的文字截斷並新增省略符號。

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

5. 使用偽元素

除了上述方式，還可以透過使用CSS中的偽元素來控製文字不進行自動換行。例如，可以使用“

以上是css讓文字不換行的詳細內容。更多資訊請關注PHP中文網其他相關文章！