CSS实现超出文本自动换行

可以使用 CSS 属性 `word-wrap` 或 `overflow-wrap` 来实现超出文本自动换行。

`word-wrap` 属性允许在单词内断开文本，以便适应包含它的容器的宽度。它有两个可能的值：

- `normal`：默认值，不在单词内断开文本。
- `break-word`：在单词内断开文本，以便适应包含它的容器的宽度。

示例代码：

.container {
  width: 200px;
  word-wrap: break-word;
}

`overflow-wrap` 属性也允许在单词内断开文本，但更智能，确保在单词边界处进行断开。它有两个可能的值：

- `normal`：默认值，不在单词内断开文本。
- `break-word`：在单词内断开文本，以便适应包含它的容器的宽度。

示例代码：

.container {
  width: 200px;
  overflow-wrap: break-word;
}

这两个属性的表现非常相似，通常可以互换使用。

相关问题

css 文本超出自动换行

在 CSS 中，可以使用 `word-wrap` 或 `overflow-wrap` 属性来实现文本的自动换行。

1. 使用 `word-wrap: break-word;` 可以让长单词或 URL 在边界处换行，而不会溢出容器。这个属性也可以用于处理非英文字符的换行。示例代码如下：

.my-text {
  word-wrap: break-word;
}

2. 使用 `overflow-wrap: break-word;` 与 `word-break: break-all;` 可以让文本在任意位置断行，而不会溢出容器。这个属性在处理长英文单词时更有效。示例代码如下：

.my-text {
  overflow-wrap: break-word;
  word-break: break-all;
}

你可以根据具体需求选择其中一种方式来实现文本的自动换行。

css超出盒子自动换行

当一个元素的内容超出了它的容器大小时，可以使用CSS中的`word-wrap`或`overflow-wrap`属性来控制文本的自动换行。这两个属性的作用是一样的，都是用来控制文本在超出容器边界时如何换行。

`word-wrap`属性有两个可选值：`normal`和`break-word`。默认值是`normal`，表示当一个单词超出容器边界时，会将整个单词移到下一行。如果设置为`break-word`，则会在单词内部进行换行。

`overflow-wrap`属性也有两个可选值：`normal`和`break-word`。默认值是`normal`，表示当一个单词超出容器边界时，会将整个单词移到下一行。如果设置为`break-word`，则会在单词内部进行换行。

示例代码如下：

.container {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  overflow: auto;
  word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
}

.content {
  width: 300px;
}

在上面的示例中，`.container`是一个固定宽度和高度的容器，设置了边框和滚动条。`.content`是容器中的内容，宽度比容器宽度大，会导致内容超出容器边界。通过设置`word-wrap: break-word;`或者`overflow-wrap: break-word;`，可以让文本在单词内部进行换行，从而避免内容溢出容器。