在網頁設計與開發中，我們通常需要控制頁面元素的排版和樣式，其中文字排版較為常見的一個問題就是如何使文字不換行。本文將介紹CSS中一些常見的方法，幫助你解決這個問題。
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;
}在設定了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;
}在部分情況下，即使透過white-space和word-break屬性設定了正確的文字排版方式，文字長度也可能超出了盒子的寬度。這時需要使用overflow屬性來控製文字的溢出效果。 overflow屬性有4個取值可選：visible、hidden、scroll、auto。它們的效果分別是：
visible：預設值，不做任何處理，允許內容超過盒子範圍顯示在盒子外部； hidden：溢出部分隱藏，不可見；scroll：顯示滾動條，使用者可以透過滾動條來查看超出部分;auto ：依實際需求顯示捲軸。 如果想讓文字在一行上顯示，不自動換行，並且溢出部分隱藏，可以結合使用white-space和overflow屬性。
div {
white-space: nowrap;
overflow: hidden;
}當使用overflow: hidden屬性隱藏文字溢出部分時，有可能會導致使用者看不到完整的文字內容。這時可以使用text-overflow屬性來控製文字的溢出效果。 text-overflow屬性有2個取值可選：clip、ellipsis。它們的效果分別是：
clip：將文字截斷，並隱藏超出部分，不加入省略符號； ：將文字截斷，並隱藏超出部分，加入省略符號（...）。 text-overflow屬性的取值設定為ellipsis，來讓超長的文字截斷並新增省略符號。
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}以上是css讓文字不換行的詳細內容。更多資訊請關注PHP中文網其他相關文章！
