设置white-space: pre-wrap后Div仍被文本撑开，如何实现正确换行？

解决这个问题核心是用CSS控制文本换行规则，无需复杂JS，分两类容器处理：

一、代码类pre标签（jscode、pycode等） #

代码标签默认会保留格式且不自动换行，直接添加以下CSS规则即可：

.jscode, .pycode, pre {
  white-space: pre-wrap; /* 保留代码原有换行，同时超出容器宽度自动折行 */
  overflow-x: auto; /* 折行后仍有横向溢出时，显示水平滚动条，不撑宽容器 */
  word-wrap: break-word; /* 超长无空格标识符（如长变量名）也能强制折行 */
}

• white-space: pre-wrap：既保留代码里的换行符，又让超出容器的内容自动折行，不会撑破容器；
• overflow-x: auto：如果折行后仍有横向内容，会显示水平滚动条，保证容器宽度不变；
• word-wrap: break-word：针对没有空格的超长文本（比如连续的变量名、字符串），强制拆分换行。

二、#output容器（普通div类容器） #

先给容器设定固定宽度或百分比宽度（这是保持原有宽度的前提），再添加换行规则：

#output {
  width: 80%; /* 或固定值如500px，根据布局需求调整 */
  white-space: normal; /* 恢复默认自动换行行为，避免被设置为nowrap */
  word-break: break-all; /* 超长无空格文本（连续数字、英文）强制折行 */
  overflow-x: auto; /* 可选，溢出时显示水平滚动条 */
}

• 先设置width：确保容器有固定的宽度基准，不会随内容自动撑开；
• word-break: break-all：不管文本有没有空格，只要超出容器宽度就强制折行，彻底避免容器被撑宽。

额外注意 #

如果是通过JS动态向容器添加文本，只要提前写好上述CSS规则，添加内容后会自动生效，不需要额外编写JS逻辑来处理换行，CSS是最高效的解决方案。

内容的提问来源于stack exchange，提问作者sw123456