使用HTML<br>标签时H1元素输出格式异常的技术求助

问题出在你给<h1>设置的line-height: 1.5px属性上。你的字体大小是55px，但行高仅设置为1.5px，这个值远小于字体本身的高度。当用<br>把文本拆成两行时，两行文字的垂直空间被压缩到极致，导致文字重叠、显示异常；而单行文本时，这个问题不会暴露出来。

解决方法很简单，把line-height调整为合理的值即可，推荐使用相对值（比如基于字体大小的倍数）或者足够容纳字体的像素值：

h1 {
  font-family: league spartan;
  color: #ffa511;
  text-align: center;
  font-size: 55px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1.2; /* 改为相对倍数，适配字体大小 */
  text-decoration: teal double underline;
  text-transform: uppercase;
}

或者你也可以设置固定像素值，比如line-height: 60px，只要这个值大于等于你的字体大小，就能保证两行文本有足够的垂直间距，正常显示。

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