本文目錄導讀：

1. 使用CSS的display屬性
2. 使用CSS的white-space屬性
3. 使用CSS的word-wrap屬性

如何用CSS控制DIV元素的換行行為

在網頁設計中，我們經常需要控制HTML元素的布局，包括如何處理元素之間的換行問題，雖然HTML自身有默認的換行行為，但我們可以通過CSS來更加精細地控制這些行為，本文將介紹如何使用CSS來控制DIV元素的換行行為。

使用CSS的display屬性

在CSS中，我們可以通過改變元素的display屬性來控制元素的換行行為，對于DIV元素，我們可以使用以下幾種值來控制換行：

1、block：默認值，每個DIV都會獨占一行。

2、inline：使DIV元素表現為內聯(lián)元素，與其他元素在同一行顯示，除非空間不足才會自動換行。

3、inline-block：使DIV元素表現為內聯(lián)塊級元素，既可以設置寬度和高度，又可以與其他元素在同一行顯示。

如果你想讓兩個DIV元素在同一行顯示，你可以這樣寫CSS代碼：

div {
  display: inline-block;
}

使用CSS的white-space屬性

除了display屬性外，我們還可以使用CSS的white-space屬性來控制元素的換行行為，white-space屬性定義了如何處理元素內的空白，對于DIV元素來說，我們可以設置white-space屬性為nowrap來防止文本自動換行。

div {
  white-space: nowrap;
}

使用CSS的word-wrap屬性

word-wrap屬性允許長單詞或URL跨行斷開，以避免文本溢出，對于不希望因長單詞或URL導致?lián)Q行的DIV元素，可以設置word-wrap屬性為break-word：

div {
  word-wrap: break-word;
}

通過使用CSS的display、white-space和word-wrap屬性，我們可以有效控制DIV元素的換行行為，在實際設計中，應根據具體需求選擇合適的屬性來控制DIV元素的布局。