深入了解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>