Angular中div内文本超出宽度仍单行显示无法自动换行如何解决

问题场景 #

模板代码结构如下，绑定的text为普通字符串类型，文本长度超出div容器宽度时始终单行渲染、不会自动换行，经排查<p>元素宽度设置无异常：

<div>
     <p>
        {{text}}
    </p>
</div>

问题根因 #

该现象和Angular框架本身无关，属于CSS文本渲染的默认规则问题：
浏览器默认只会在空格、连字符这类空白/断字分隔位置触发文本换行，如果绑定的text是连续无分隔的长内容（比如长URL、连续无空格的英文/数字串），即使元素宽度设置正确，也不会自动换行，会直接溢出容器。
如果父级样式或全局样式存在white-space: nowrap配置，也会强制文本单行显示，阻断自动换行。

修复方法 #

给文本所在的<p>标签添加对应CSS样式即可，根据业务场景选择配置：

• 通用场景（适配所有长文本，包括连续无空格的数字、英文、链接，不会撑破容器）

  p {
    /* 覆盖可能存在的强制不换行配置 */
    white-space: normal;
    /* 允许长单词、连续字符串在边界处换行 */
    word-break: break-word;
    overflow-wrap: break-word;
  }
  

• 英文内容优先场景（尽量保持单词完整性，自动添加连字符）

  p {
    white-space: normal;
    overflow-wrap: break-word;
    /* 浏览器自动在换行位置添加连字符，适配英文排版 */
    hyphens: auto;
  }
  

配置完成后长文本超出容器宽度时就会自动折行显示。

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