保持标题 (h1, h2...) 在换行符处不全宽

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

有人知道如何防止这种情况吗？另外，如果它会破坏其他标题，我实际上无法使用仅适用于此解决方案的解决方案，因为相同的代码正在使用相同的结构生成其他 9 个非换行标题。

感谢您的时间。

代码笔：https://codepen.io/anon/pen/gGdYmB#anon-signup 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>

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

如果您同意跨度中的文本换行：让你的span显示为block而不是inline-block，或者切换到div而不是span。这将确保文本换行without首先尝试水平扩展你的父母。既然在这种情况下内联块可能无论如何都会有换行符，为什么不这样做呢？

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