CSS如何实现文本换行？

八股文_CSS面试题 0 65

在CSS中，文本换行可以通过以下几种方式实现：

word-wrap属性（或overflow-wrap）：
- 用于强制文本在必要时换行。
- 常用的值是break-word，它会强制在单词边界内换行，以避免单词溢出容器。
例如：
```
p {
 word-wrap: break-word;
}
```
white-space属性：
- 控制如何处理空格和换行符。
- 常用的值有：
  - normal：默认值，允许文本换行，连续空格会被合并。
  - nowrap：禁止文本换行，所有文本会在一行内显示，直到遇到<br>标签。
  - pre：保留文本中的空格和换行符，类似于<pre>标签的效果。
  - pre-wrap：保留文本中的空格和换行符，但也允许文本在必要时换行。
  - pre-line：保留文本中的换行符，空格会被合并，但文本也可以在必要时换行。
例如：
```
p {
 white-space: pre-wrap;
}
```

这两个属性的作用是允许单词在超出容器宽度时进行换行。现代浏览器支持overflow-wrap，而word-wrap是它的早期版本，二者是等效的。

word-wrap: break-word;：它会强制单词在容器宽度不够时断开并换行，这对于长单词或长网址特别有用。
例如：
```
div {
width: 150px;
word-wrap: break-word;
}
```
如果div中的文本包含非常长的单词，它将会在需要时换行，避免文字溢出。

white-space属性用来控制文本中的空白字符和换行符的处理方式。它非常有用，尤其是当你希望保持文本的格式时（例如，保留多个空格或强制换行）。

例如：

p {
  white-space: pre-wrap;  /* 保留空格和换行符，并且允许换行 */
}

这样，<p>中的文本将会根据容器宽度自动换行，同时保留文本中的换行符。

通过合理使用这些属性，可以控制文本的换行方式，确保文本在不同布局中的正确显示。