CSS是一種用于為網頁添加樣式和布局的語言，它的功能非常強大而靈活。在網頁設計中，我們經常需要在div元素中放置文本內容，但有時這些內容會超出div的寬度，導致內容溢出或者無法換行。本文將介紹如何使用CSS控制div內的文本內容換行。
在CSS中，我們可以使用word-wrap屬性來控制文本的換行方式。默認情況下，文本會根據div的寬度自動換行。如果我們想要強制在一個特定位置換行，可以將word-wrap屬性設置為break-word。這樣，文本就會在最近的空格或連字符處換行。
以下是一個簡單的例子，展示了如何使用word-wrap屬性將長文本內容在div中換行：

<code><style>
.container {
width: 200px;
border: 1px solid black;
}
.content {
word-wrap: break-word;
}
</style>
<br>
<div class="container">
<p class="content">這是一個超長的文本內容，它會在最近的空格或連字符處換行。這是一個超長的文本內容，它會在最近的空格或連字符處換行。這是一個超長的文本內容，它會在最近的空格或連字符處換行。</p>
</div></code>

在這個例子中，我們創建了一個寬度為200px的div容器，并給它添加了一個像素的黑色邊框。然后，在div中的一個p標簽中添加了一個超長的文本內容。通過將p標簽的class設置為content，我們對這段文本應用了word-wrap: break-word;的樣式。這樣，當文本超出div的寬度時，它會在最近的空格或連字符處斷行，以適應div的寬度。
除了word-wrap屬性，我們還可以使用overflow-wrap屬性來控制文本的換行方式。與word-wrap屬性不同的是，overflow-wrap屬性只在必要的時候才會換行，即當單詞太長無法放在一行時才會進行換行。
以下是一個使用overflow-wrap屬性的例子：

<code><style>
.container {
width: 200px;
border: 1px solid black;
}
.content {
overflow-wrap: break-word;
}
</style>
<br>
<div class="container">
<p class="content">這是一個超長的文本內容，它會在單詞的中間進行換行。這是一個超長的文本內容，它會在單詞的中間進行換行。這是一個超長的文本內容，它會在單詞的中間進行換行。</p>
</div></code>

在這個例子中，我們創建了一個與前一個例子相同的div容器。在p標簽中，我們將class設置為content，并對它應用了overflow-wrap: break-word;的樣式。這樣，當單詞太長無法放在一行時，文本會在單詞的中間進行換行。
除了以上兩種屬性，我們還可以使用white-space屬性來控制文本的換行方式。默認情況下，white-space屬性的值是normal，表示文本會自動換行。但我們還可以將其設置為pre-wrap或pre-line，以實現不同的換行效果。
以下是一個使用white-space屬性的例子：

<code><style>
.container {
width: 200px;
border: 1px solid black;
}
.content {
white-space: pre-wrap;
}
</style>
<br>
<div class="container">
<p class="content">這是一個超長的文本內容，它會根據設置的寬度自動換行。這是一個超長的文本內容，它會根據設置的寬度自動換行。這是一個超長的文本內容，它會根據設置的寬度自動換行。</p>
</div></code>

在這個例子中，我們創建了一個與前兩個例子相同的div容器，并給p標簽添加了class為content的樣式。然后，在樣式中，我們將white-space屬性設置為pre-wrap，這樣文本會根據div設置的寬度自動換行。
綜上所述，通過使用CSS的word-wrap、overflow-wrap和white-space等屬性，我們可以輕松地控制div中文本內容的換行方式。這些屬性的靈活使用可以確保文本內容在網頁中顯示得更加美觀和合理。希望本文對你理解和應用CSS中div內容換行有所幫助。