本文目錄導讀：

1. 使用word-wrap屬性
2. 使用flex布局或grid布局調整換行

如何用CSS控制文本換行

在網頁設計中，控制文本的換行是一個重要的方面，可以通過CSS樣式來實現，下面介紹幾種常見的用CSS設置文本換行的方法。

使用word-wrap屬性

word-wrap屬性允許長單詞或URL跨越多行，當文本中的單詞太長而無法在一行內顯示時，瀏覽器會自動進行換行處理。

div {
  word-wrap: break-word; /* 允許長單詞或URL跨越多行 */
}

二、使用overflow屬性與white-space屬性結合使用

溢出容器邊界時，可以通過overflow屬性與white-space屬性結合使用來控制文本的換行。

div {
  white-space: nowrap; /* 文本不換行 */
  overflow: hidden; /* 隱藏溢出部分 */
}

使用flex布局或grid布局調整換行

對于使用flex布局或grid布局的容器，可以通過調整子元素的flex或grid屬性來控制文本的換行。

.container {
  display: flex; /* 或grid */
  flex-wrap: wrap; /* 子元素超出容器寬度時換行 */
}

四、使用CSS Grid布局中的grid-auto-flow屬性控制換行行為

對于使用CSS Grid布局的元素，可以使用grid-auto-flow屬性來控制換行行為，可以設置列的順序和是否自動換行等。

.grid {
  display: grid; /* 創(chuàng)建網格布局 */
  grid-auto-flow: column; /* 列優(yōu)先布局，自動換行 */
} 
``` 通過靈活運用這些CSS屬性和布局方式，我們可以有效地控制網頁中的文本換行行為，提升網頁的排版效果和用戶體驗。