CSS文字超出宽度自动换行

在网页设计中，经常会遇到文字内容超出容器宽度的情况，这时就需要让文字自动换行，以保证页面整体美观和内容的完整性。在CSS中，有多种方法可以实现文字超出宽度自动换行，下面将逐一介绍。

1. 使用`word-wrap: break-word`

word-wrap: break-word是CSS3中的属性，用于控制文本如何换行。当文本内容超出容器宽度时，会在单词内断行，以保证整个单词完整显示。

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

<div class="break-word" style="width: 100px">
  This is a long sentence that will be broken into two lines.
</div>

在上面的示例中，当容器宽度为100px时，文字将会自动换行，保证整个单词完整显示。

word-break: break-all是CSS3中的属性，用于控制文本如何换行。当文本内容超出容器宽度时，会在任意字符处断行。

.break-all {
  word-break: break-all;
}

<div class="break-all" style="width: 100px">
  This is a long sentence that will be broken into multiple lines.
</div>

在上面的示例中，当容器宽度为100px时，文字将会在任意字符处自动换行。

white-space: pre-wrap是CSS中的属性，用于控制元素内部空白字符的处理方式。它会保留换行符，并允许文字自动换行。

.pre-wrap {
  white-space: pre-wrap;
}

<div class="pre-wrap" style="width: 100px">
  This is a long sentence that will be broken into two lines.
</div>

在上面的示例中，当容器宽度为100px时，文字将会保留换行符，并允许自动换行。

overflow-wrap: break-word是CSS3中的属性，用于控制文本如何换行。当文本内容超出容器宽度时，会在单词内断行。

.overflow-wrap {
  overflow-wrap: break-word;
}

<div class="overflow-wrap" style="width: 100px">
  This is a long sentence that will be broken into two lines.
</div>

在上面的示例中，当容器宽度为100px时，文字将会在单词内自动换行。

在网页设计中，保证文字内容能够自动换行是非常重要的。通过合理使用word-wrap、word-break、white-space和overflow-wrap等CSS属性，可以有效解决文字内容超出宽度的问题，提升页面的可读性和美观性。