div 文字轉行

在網頁開發中，我們經常會使用<div>標簽來定義一個塊級容器，用于布局和組織文檔中的內容。然而，有時當塊級容器內部的文字太長或容器的寬度不夠時，文字可能會超出容器的邊界。為了實現文字在div容器內自動換行，我們可以使用一些CSS屬性和技巧。

1. word-break屬性

word-break屬性用于指定一個長單詞或URL地址是否允許自動換行到下一行。它有以下幾個值：

div {
word-break: normal; /* 默認值，長單詞會溢出到容器外 */
}
<br>
div {
word-break: break-all; /* 單詞會強制斷行到下一行 */
}
<br>
div {
word-break: keep-all; /* 不允許單詞斷行，只會在空格或破折號處斷行 */
}

2. overflow-wrap屬性

overflow-wrap屬性用于指定長單詞或URL地址是否允許斷行到下一行，以及斷行位置。它有以下幾個值：

div {
overflow-wrap: normal; /* 默認值，超出容器寬度的部分會溢出到下一行 */
}
<br>
div {
overflow-wrap: break-word; /* 長單詞或URL地址會在容器邊界處斷行 */
}

3. white-space屬性

white-space屬性用于指定如何處理空白符、換行符和制表符。它有以下幾個值：

div {
white-space: normal; /* 默認值，連續的空白符會被合并，換行符會被當作空白符處理 */
}
<br>
div {
white-space: nowrap; /* 不允許文本換行，所有文本會顯示在同一行上 */
}
<br>
div {
white-space: pre; /* 保留連續的空白符、換行符和制表符，保持文本的原始格式 */
}

4. 綜合應用

下面是一個綜合運用上述屬性的例子：

div {
width: 200px;
border: 1px solid black;
word-break: break-all;
overflow-wrap: break-word;
white-space: pre-wrap;
}

在上面的例子中，div容器的寬度被限制為200像素，當文字超出容器寬度時，長單詞或URL地址會自動斷行到下一行，并且保留連續的空白符、換行符和制表符。

通過掌握以上這些CSS屬性，我們可以更好地控制div容器內文字的排版和換行，從而提升網頁的可讀性和用戶體驗。