CSS 如何使div内的文本换行

在本文中，我们将介绍如何使用CSS让div内的文本换行，并提供一些示例说明。

阅读更多：CSS 教程

CSS white-space属性

要让div内的文本换行，我们可以使用CSS的white-space属性。这个属性用于设置元素内部文本的处理方式。默认情况下，文本会在一行内显示，如果文本过长，会溢出到下一行以外。

下面是white-space属性的常用取值：

normal：文本在遇到空格或换行符时换行，连续的空格会被合并成一个空格。
nowrap：文本不换行，全部显示在一行内。
pre：文本在遇到换行符时换行，连续的空格会被保留。
pre-line：文本在遇到换行符或空格时换行，连续的空格会被合并成一个空格。

示例1：使用white-space:normal

下面的示例演示了如何使用white-space:normal属性实现div内的文本换行：

<div class="multiline-text">
  This is a long text that needs to be displayed in multiple lines.
</div>

<style>
.multiline-text {
  white-space: normal;
}
</style>

上述代码中，通过将

div>元素的class设为”multiline-text”，并在样式表中使用white-space:normal属性，可以让文本在遇到空格或换行符时换行。

示例2：使用white-space:pre-line

下面的示例演示了如何使用white-space:pre-line属性实现div内的文本换行：

<div class="multiline-text">
  This    is 
  a    long
  text
</div>

<style>
.multiline-text {
  white-space: pre-line;
}
</style>

上述代码中，文本中的连续空格被合并成一个空格，并且在遇到换行符或空格时进行换行显示。

CSS word-wrap属性

除了white-space属性外，我们还可以使用CSS的word-wrap属性来实现div内文本的换行。该属性用于指定当单词长度超过容器宽度时，是否允许单词内部的换行。取值范围为normal、break-word和anywhere。

normal：默认值，当单词长度超过容器宽度时，不允许单词内部换行。
break-word：当单词长度超过容器宽度时，会在单词内部换行。
anywhere：无论单词长度如何，在任何地方都允许换行。

示例3：使用word-wrap:break-word

下面的示例演示了如何使用word-wrap:break-word属性实现div内的文本换行：

<div class="multiline-text">
  Thisisaverylongwordthatneedstobebrokenintomultiplelinesinthediv.
</div>

<style>
.multiline-text {
  word-wrap: break-word;
}
</style>

上述代码中，当单词长度超过容器宽度时，会在单词内部进行换行。

示例4：使用word-wrap:anywhere

下面的示例演示了如何使用word-wrap:anywhere属性实现div内的文本换行：

<div class="multiline-text">
  Thisisaverylongwordthatneedstobebrokenintomultiplelinesinthediv.
</div>

<style>
.multiline-text {
  word-wrap: anywhere;
}
</style>

上述代码中，无论单词长度如何，在任何地方都允许换行。