HTML中p标签内文本无法自动换行是什么原因？如何解决？

问题原因 #

• 你的p标签内是没有任何空格、分隔符的连续长字符串，浏览器默认的换行规则只会在空白字符、常规标点等预设点位触发换行，连续无间隔的字符会被识别为单个整体，不会主动断开。
• body设置为flex容器，flex布局的子元素默认min-width为auto，会优先根据内容宽度撑开自身尺寸，你给#root设置的固定宽度会被超长内容覆盖失效。

解决方法 #

仅需在现有CSS中补充少量代码即可：

#root {
  height: 80%;
  width: 90%;
  border: 1px solid red;
  min-width: 0; /* 覆盖flex子项默认最小宽度规则，强制遵守设定的width值 */
}

#root p {
  overflow-wrap: break-word; /* 允许超长连续字符串在容器边界处断行 */
}

如果你需要更严格的断行效果（字符到边界就断开，不需要等待完整语义单元），可以将overflow-wrap: break-word替换为word-break: break-all。

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