Question

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

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

感谢您的时间。

CodePen：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

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

如果您对跨度中的文字打破新行感到满意： 将跨度显示为块而不是内联块，或切换到div而不是span。这将确保文本转到新行，而首先尝试水平扩展父级。因为在这种情况下的内联块可能会有一个换行符，为什么不这样做呢？

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

Answer 2

您可以在max-width: 80%; css（第7行）设置.parent h2以获得所需的结果

Answer 3

您可以设置max-width。见下面的例子：

＆＃13;

.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;
  max-width: 45vw; /* 5vw smaller then your parent width, which is 50vw */
}
.parent h2 span {display:inline-block}

＆＃13;

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

＆＃13;

保持航向（h1，h2 ......）在换行符上的全宽

3 个答案: