如何将整个标题划分为两行

Question

我试图强调我的整个标题（h1），它分为两行：

我已经成功完成了它，但并不完全理解它背后的逻辑，即当我应用这个CSS时，它没有工作：

CSS：

.main h1 {
  font-size: 65px;
  text-transform: capitalize;
  font-weight: bold;
  border-bottom: 5px solid #1A77FF;
}

然而，当我添加span标签时，它对我有用

CSS：

.main h1 span {
  font-size: 65px;
  text-transform: capitalize;
  font-weight: bold;
  border-bottom: 5px solid #1A77FF;
} 

有人可以向我解释一下吗？提前谢谢。

Answer 1

不确定

任何标题标记（如h1）都是块级元素，因此任何边框都应用于块作为整体而不是内部文本。

span是内联元素，仅与内容一样宽（具有某些约束）。因此，即使换行，底部边框也仅适用于范围内容。

Mozilla.org (Understanding the inline box model)

  

内联框水平放置在一个称为“线框”的框中：

     

如果没有足够的水平空间将所有元素放入一条线（或者线被强行折断），则在第一条线下创建另一个线框。 然后可以跨行分割单个内联元素

     

当内联框分割为多行时，它仍然是逻辑上的单个框。这意味着任何水平填充，边框或边距仅应用于框占用的第一行的开头和最后一行的末尾。

H1.block {
  border-bottom: 3px solid red;
}
H1 SPAN {
  border-bottom: 3px solid blue;
}

<h1 class="block">BLOCK FORMAT</h1>

<h1><span>INLINE <br/> FORMAT</span></h1>

Answer 2

<div>是块级元素，而<span>是内联元素 当您使用<div>时，它将文本包装在一个完整的块中，如下所示。因此，border属性应用于整个块

当您使用<span>时，它会逐行包装内容。因此，当添加border属性时，它会显示在每一行下面