在 CSS 中，你可以使用 `wordwrap` 或 `overflowwrap` 属性来控制文本是否自动换行。这些属性可以确保当文本达到容器的边界时，它会在合适的点自动换行，而不是溢出容器。

`wordwrap` 和 `overflowwrap`

`wordwrap` 属性是一个非标准的属性，但在许多浏览器中得到了广泛支持。它有两个可能的值： `normal`：允许单词超出容器边界。 `breakword`：在长单词或 URL 超出容器边界时，在单词内进行换行。

`overflowwrap` 是 `wordwrap` 的标准化版本，并且它的行为与 `wordwrap` 的 `breakword` 值相同。

使用方法

```css.container { width: 200px; / 设置容器宽度 / border: 1px solid 000; / 添加边框以便观察效果 / wordwrap: breakword; / 允许在单词内换行 / overflowwrap: breakword; / 标准化写法 /}```

示例

假设你有一个宽为 200 像素的容器，并且你想要确保其中的文本在必要时自动换行，你可以这样写：

```htmlText Wrapping Example .container { width: 200px; border: 1px solid 000; wordwrap: breakword; overflowwrap: breakword; } This is a long piece of text that should wrap automatically if it exceeds the width of the container.```

在上面的例子中，文本会根据容器的宽度自动换行，即使单词很长，也会在单词内部进行换行。

CSS文本自动换行详解

在网页设计中，文本的布局和显示效果对于用户体验至关重要。其中，文本自动换行是一个常见的需求，它能够确保文本在容器内合理分布，避免内容溢出或布局混乱。本文将详细介绍CSS中实现文本自动换行的方法，帮助开发者更好地控制网页文本的显示效果。

什么是文本自动换行

文本自动换行指的是当文本内容超出指定容器的宽度时，浏览器会自动将文本拆分成多行，以适应容器的宽度。这种换行方式能够保证文本在容器内均匀分布，提高网页的可读性。

实现文本自动换行的CSS属性

white-space

`white-space` 属性用于设置空白字符的处理方式，包括空格、换行符等。以下是其常用值：

- `normal`：默认值，空白字符会被浏览器压缩，连续的空白字符只保留一个。

- `nowrap`：文本不会换行，超出容器宽度时直接溢出。

- `pre`：保留空白字符，文本按照预格式化格式显示。

- `pre-wrap`：与`pre`类似，但空白字符会被压缩。

- `pre-line`：空白字符会被压缩，但会在需要时自动换行。

word-wrap

`word-wrap` 属性用于控制当文本超出容器宽度时，是否允许单词在边界处断开。以下是其常用值：

- `normal`：默认值，不允许单词在边界处断开。

- `break-word`：允许单词在边界处断开，以适应容器宽度。

- `break-all`：允许所有字符在边界处断开，包括非亚洲语言字符。

- `anywhere`：允许在任何位置断开，包括非单词边界。

word-break

`word-break` 属性用于控制单词在边界处断开的方式。以下是其常用值：

- `normal`：默认值，依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。

- `break-all`：与亚洲语言的`normal`相同，也允许非亚洲语言文本行的任意字内断开。

- `keep-all`：与所有非亚洲语言的`normal`相同，对于非亚洲语言文本，不允许在字内断开。

实例演示

以下是一个简单的实例，演示如何使用CSS实现文本自动换行：

```html