HTML中code标签内容无法自动换行是什么原因？该如何解决？

你只需要在现有code的CSS规则中新增white-space和overflow-wrap相关配置即可，修改后的完整样式如下：

code {
  font-family: 'Source Code Pro', monospace;
  display: block;
  background-color: blue;
  color: #fafafa;
  border-radius: .5em;
  padding: 1em;
  word-wrap: break-word;
  /* 新增以下两行配置 */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

配置说明 #

code标签默认的white-space属性值为pre，该规则会保留文本内所有空格、换行符，且不会主动根据容器宽度折行，这就是你之前设置了宽度、word-wrap: break-word也不生效的原因。
新增的两个属性作用分别是：

• white-space: pre-wrap：保留代码原本的空格、换行格式，同时允许文本超出容器宽度时自动折行
• overflow-wrap: break-word：当一行内的超长文本（比如无空格的URL、长字符串）无法被正常折行时，强制在内容内部断开换行，避免内容溢出

如果需要兼容更低版本的浏览器，保留原有word-wrap: break-word配置即可，它是overflow-wrap的旧称，主流浏览器均同时支持两个属性。

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