深入了解div文字换行

一、div文字换行显示

在HTML中，文本默认不允许超出其容器的边界，这就意味着如果我们直接在 div 元素中插入长文本，它将会被截断 – 不管是否存在空间容纳全部文本。要确保文本不被截断，我们需要通过CSS设置 div 元素的宽度，并设置样式 white-space: normal。这样，文本在遇到容器的边缘时，会自动换行。

  <div style="width: 400px; white-space: normal;">
    这是一段长文本，需要通过设置 white-space: normal; 才能在 div 元素中自动换行。
  </div>

二、div文字不换行

如果不希望文本自动换行，可以通过设置 white-space: nowrap; 来阻止它自动换行。此时文本会沿着一条线延伸，直到遇到容器的边缘或者遇到换行符为止。

  <div style="white-space: nowrap;">
    这是一段长文本，将不会自动换行，而是沿着一条平行于容器侧边延伸。
  </div>

三、div文字换行符

有时候，我们需要手动在文本中插入换行符。这可以通过使用 \n 或者 <br> 实现。注意，如果 div 元素中的文本包含 \n，那么 white-space: pre-wrap 或 white-space: pre-line 样式将允许它自动换行。

  <div style="white-space: pre-wrap;">
    这是一段长文本，可以通过 \n 或 <br> 插入换行符进行手动换行。
  </div>

四、div文字换行居中显示

要想实现 div 中文本的垂直居中，我们需要使用 flexbox 布局，将相应的 div 元素设置为 flex 容器，并将其内部元素 (文本) 垂直居中。

  <div style="display: flex; justify-content: center; align-items: center; height: 200px;">
    这是需要居中显示的文本。
  </div>

五、div文字换行后垂直对齐

另一方面，如果您需要实现在文本换行后的垂直对齐，您可以将行高设置为与容器的高度相同。这将确保所有行都具有相同的高度，从而使它们在每一行垂直居中。

  <div style="height: 300px; line-height: 300px;">
    这是一段需要在垂直方向上居中的长文本。
  </div>

六、文字超出div自动换行

当文本超出 div 元素的宽度时，它将在默认情况下溢出此容器。但是，通过使用 overflow: auto 样式，您可以允许文本自动换行以使其适应容器的宽度。

  <div style="width: 200px; overflow: auto;">
    这是一段超出容器宽度的长文本。通过设置 overflow: auto，我们可以允许文本自动换行以适应它的容器。
  </div>

七、div内文字换行

在默认情况下，div 中的文本永远不会自动换行 – 除非我们设置一个特定的宽度、或使用 white-space: normal 样式。如果希望不设置特定宽度，仍然可以强制 div 元素的文本自动换行，可以使用 word-wrap 样式。

  <div style="word-wrap: break-word;">
    这是一段较长的文本在不指定特定宽度的情况下，在 div 元素中自动换行的实现方式之一。
  </div>

八、word文字很短就换行了

有时候，较短的词会出现在长句子的末尾，并且因为在 div 元素宽度内，它们会独占一行。在这种情况下，可以使用 word-break 或者 word-wrap 样式解决。

  <div style="word-break: break-all;">
    这是一段含有较短单词的文本。通过这条 CSS 样式，我们可以在这些单词出现在行尾时强制它们换行，从而使 div 元素的宽度被占用更加高效。
  </div>

九、div文字自动换行

如果不设置特定宽度，那么 div 元素中的文字就不会自动换行。通过设置 word-wrap 或者 word-break 样式，可以强制 div 中的文本自动换行。

  <div style="word-wrap: break-word;">
    这是一段较长的文本，并将在不指定特定宽度的情况下，在 div 元素中自动换行。
  </div>