在CSS中，你可以使用 `wordwrap` 或 `overflowwrap` 属性来设置文本的自动换行行为。这两个属性在大多数现代浏览器中具有相同的效果。此外，`whitespace` 属性也可以影响文本的换行行为。
1. `wordwrap` 或 `overflowwrap`： `normal`：默认值，只在单词之间换行。 `breakword`：允许在单词内部换行，以避免溢出容器。
2. `whitespace`： `normal`：合并空白符序列，但保留换行符。 `nowrap`：不换行，文本会在同一行上继续，直到遇到 `br` 元素或容器的边界。 `pre`：保留空白符序列（包括空格、制表符、换行符等）。 `prewrap`：保留空白符序列，但是正常换行。 `preline`：合并空白符序列，但是保留换行符。
以下是一个示例代码，展示了如何使用这些属性来设置文本的自动换行：
```css.container { width: 200px; / 设置容器的宽度 / border: 1px solid 000; / 为了可视化容器边界 / wordwrap: breakword; / 允许在单词内部换行 / whitespace: normal; / 合并空白符序列，但保留换行符 /}```
```html This is a very long text that might need to be wrapped automatically if it doesn't fit within the container width.```
在这个示例中，`.container` 类的宽度被设置为200像素。由于文本长度超过了容器的宽度，`wordwrap: breakword;` 允许文本在单词内部换行，以避免溢出容器。同时，`whitespace: normal;` 确保空白符序列被合并，但换行符被保留。
CSS设置自动换行详解
在网页设计中，文本的换行是一个常见的布局需求。正确的换行设置不仅能够提升用户体验，还能使页面布局更加美观。本文将详细介绍CSS中设置自动换行的方法，帮助您更好地掌握这一技巧。
什么是自动换行
自动换行是指当文本内容超出指定容器的宽度时，浏览器会自动在合适的位置进行换行，以保持文本的整洁和易读性。在CSS中，我们可以通过设置相关属性来实现自动换行。
自动换行的CSS属性
white-space
- `normal`：默认值，空白字符会被正常处理，包括换行符。
- `pre`：空白字符会被保留，包括换行符和空格。
- `pre-wrap`：空白字符会被保留，但文本会根据需要自动换行。
- `pre-line`：空白字符会被保留，但文本会根据需要自动换行，并且会合并连续的空白字符。
word-wrap
- `normal`：默认值，不允许在单词内断句。
- `break-word`：允许在单词内断句，以防止溢出。
word-break
- `normal`：默认值，长单词或URL会根据容器宽度进行断句。
- `break-all`：长单词或URL会在任何位置进行断句。
- `keep-all`：长单词或URL不会进行断句，即使超出容器宽度。
自动换行的应用场景
文本容器宽度固定
当文本容器的宽度固定时，设置自动换行可以确保文本在容器内整齐排列，避免溢出。
```css
.box {
width: 300px;
border: 1px solid ccc;
margin: 20px;
white-space: normal;
word-wrap: break-word;
长单词或URL处理
当文本中包含长单词或URL时，设置自动换行可以防止溢出，并保持文本的整洁。
```css
.long-url {
word-break: break-all;
表格单元格内容换行
在表格单元格中，设置自动换行可以使单元格内容整齐排列，避免溢出。
```css
td {
white-space: normal;
word-wrap: break-word;
