Css 强制英文自动换行以及word-wrap、word-break、white-space、overflow的用法

在CSS中，可以使用word-wrap和word-break属性来控制英文的自动换行行为。white-space和overflow属性则可以用来控制元素的空白字符处理和内容溢出的显示方式。

word-wrap（现代浏览器中通常使用overflow-wrap）

• word-wrap: break-word; 允许在长单词或URL地址内部进行换行。

word-break

• word-break: break-all; 允许在单词内部任意位置换行。
• word-break: keep-all; 禁止在单词内部换行，适用于东亚语言。

white-space

• white-space: normal; 忽略多余的空白符，自动换行。
• white-space: nowrap; 忽略多余的空白符，不自动换行。

overflow

• overflow: hidden; 隐藏溢出的内容。
• overflow: scroll; 添加滚动条来查看所有内容。
• overflow: auto; 根据需要自动添加滚动条。

实例代码

/* 使得英文在长单词或连字符处自动换行 */
.auto-wrap-long-words {
  word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
}
 
/* 使得英文在任意位置都可以换行 */
.break-anywhere {
  word-break: break-all;
}
 
/* 禁止换行，保留空白，适合东亚文字处理 */
.keep-white-space {
  white-space: keep-all;
}
 
/* 自动换行，隐藏溢出内容 */
.overflow-hidden {
  white-space: normal;
  overflow: hidden;
}
 
/* 自动换行，并在需要时显示滚动条 */
.scroll-if-needed {
  white-space: normal;
  overflow: auto;
}

在HTML中使用这些类：

<div class="auto-wrap-long-words">
  ThisIsAVeryLongWordThatNeedsToBeBrokenDownIntoMultipleLinesBecauseItDoesNotFitInTheContainer.
</div>
 
<div class="break-anywhere">
  ThisIsAVeryLongWordThatNeedsToBeBrokenDownIntoMultipleLinesBecauseItDoesNotFitInTheContainer.
</div>
 
<div class="keep-white-space">
  中文保持空白不换行，如果长度超出则使用word-wrap规则处理。
</div>
 
<div class="overflow-hidden">
  这是一段很长的文本，将会被隐藏，但是我们可以看到它确实在自动换行。
</div>
 
<div class="scroll-if-needed">
  这是一段很长的文本，它将在自动换行的同时，如果内容超出容器则显示滚动条。
</div>