保持标题（h1，h2 ...）在换行符上全宽 [英] Keep heading (h1, h2...) from going full width on line break

问题描述

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

I have headings that have display:inline-block set, but one of them is really long and takes two lines. The issue is that when it breaks to the second line, it automatically makes it take the whole width of the parent container (even though it has plenty of space around it, and it is set to inline-block).

任何人都知道如何防止这种情况发生？另外，我不能真正使用只适用于这个解决方案的解决方案，因为相同的代码会生成其他9个使用相同结构的非分行标题。

Anyone knows how to prevent this? Also, I can't really use a solution that only applies to this one if it will break other headings, because the same code is generating other 9 non-line-breaking headings using the same structure.

感谢您的时间。

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>

推荐答案

默认情况下，内嵌块会被推到第二行，除非整个元素可以放在第一行。整个单词是一个单一的元素，并试图直接插入到您的标题单词右侧。因为作为一个组的单词大于第一行所能容纳的大小，所以它将它们全部放在下一行，但是只有在展开父级（您的h2）后才能适应它。

By default, an inline-block will get pushed to the second line unless the entire element can fit on the first line. The whole group of words are a single element and are trying to be inserted into your header directly to the right of the word "That". Because the words as a group are bigger than what can fit on the first line, it puts them all on the next line, but only after expanding the parent (your h2) trying to accommodate it.

如果您可以将跨度中的文本换成新行：
将范围显示为块而不是内联块，或切换到div的跨度。这将确保文本在没有的情况下进入新行首先尝试水平扩展您的父级。由于这种情况下的内联块可能会出现换行符，为什么不这样做呢？

If you're ok with the text in span breaking to a new line: Have your span display as block instead of inline-block, or switch to div instead of span. This will ensure that the text goes to a new line without first trying to expand your parent horizontally. Since an inline-block in this situation is probably going to have a line break anyways, why not do it this way?

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

If you want to make sure that the span doesn't break: Then you can't style it as Inline-block or block. Inline-block won't break only as long as it's width is small enough. Don't set the display (in span) at all and your header will wrap the text and take up the entire width available. Then add a small left/right margin to your header, as the most wasted space you'll have is the width of your longest word being pushed to the next line.

这篇关于保持标题（h1，h2 ...）在换行符上全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！