Angular环境flex布局大字号文本重叠不换行问题排查

该渲染差异和Angular框架本身无关，核心是两个运行环境的默认全局样式规则不一致：

• CodePen环境默认保留浏览器原生用户代理样式：line-height默认值为normal（约为当前字体大小的1.2倍），块级文本默认会在触达容器边界时自动换行，行间距足够不会出现重叠。
• Angular项目初始化时，CLI自带的样式重置、或是项目引入的第三方UI库（如Angular Material）的全局重置样式，会修改两个默认渲染规则：
  • 全局将元素line-height重置为1，部分重置规则还会引发行高继承异常，当使用大尺寸vw单位字体时，实际行高小于字体渲染高度，直接导致行重叠。
  • 部分重置规则会修改文本默认换行逻辑，导致大尺寸字体无法在容器边缘自动触发换行。

不需要调整现有布局逻辑，只需要在.jumbotron类中显式声明被全局重置覆盖的属性，固定渲染规则即可：

.jumbotron {
  background: blue;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10vw;
  text-align: center;
  /* 新增以下两个属性 */
  line-height: 1.2; /* 显式设置合理行高，彻底解决行重叠问题 */
  overflow-wrap: break-word; /* 强制文本在触达容器边界时自动换行 */
}

如果修复后发现容器高度表现异常，可以补充全局样式，打通从根节点到巨幕组件的高度继承链，代码放到全局styles.css中即可：

app-root {
  display: block;
  height: 100%;
  margin: 0;
}

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