html - 防止标题 (h1, h2...) 在换行符时全宽

Question

我的标题设置了 display:inline-block，但其中一个标题非常长，需要两行。问题是，当它中断到第二行时，它会自动使其占据父容器的整个宽度(即使它周围有足够的空间，并且它被设置为 inline-block)。

谁知道如何防止这种情况发生？此外，我不能真正使用仅适用于此标题的解决方案，如果它会破坏其他标题，因为相同的代码使用相同的结构生成其他 9 个非换行标题。

感谢您的宝贵时间。

代码笔:https://codepen.io/anon/pen/gGdYmB#anon-signup

<div id="parent1" class="parent">
  <h2>SHORT HEADING</h2>
  <h2>THE REALLY LONG HEADING THAT 
  <span>BREAKS TO A SECOND LINE</span></h2>
</div> 

<style>
.parent {
   width:50vw; 
   background-color:#046; 
   height:20vw; 
   text-align:center;
}
.parent h2 {
   display:inline-block;
   color:#fff;
   font-family:sans-serif;
   font-weight:900;
   font-size:2vw;
   background-color:#28a;
   padding:10px 0;
}
.parent h2 span {
    display:inline-block
}
</style>

Answer 1

默认情况下，内联 block 将被推到第二行，除非整个元素可以放在第一行。整组单词是一个元素，并试图直接插入到标题中单词“That”的右侧。因为单词作为一个组大于第一行可以容纳的单词，所以它将它们全部放在下一行，但只有在扩展父级(您的 h2)试图容纳它之后。

如果您同意 span 中的文本换行:让您的 span 显示为 block 而不是内联 block ，或者切换到 div 而不是 span。这将确保文本进入一个新行而无需首先尝试水平扩展您的父级。由于这种情况下的行内 block 可能无论如何都会有换行符，为什么不这样做呢？

如果您想确保跨度不会中断:那么你不能将它的样式设置为内联 block 或 block 。只要它的宽度足够小，inline-block 就不会中断。根本不要设置显示(跨度)，您的标题将包裹文本并占据整个可用宽度。然后在您的页眉中添加一个小的左/右页边距，因为您将拥有的最浪费的空间是被推到下一行的最长单词的宽度。