Не позволяйте заголовку (h1, h2) выходить на полную ширину при разрыве строки

У меня есть заголовки с установленным 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>

html css html-heading
person cVergel    schedule 13.10.2017    source источник
comment
используйте тег ‹br› ....   -  person lalit bhakuni    schedule 13.10.2017
comment
Да, это решает проблему, но заголовок не должен всегда прерываться. Только в медиа-запросах для ширины ниже 590 пикселей и выше 1200 пикселей. Таким образом, вставка ‹br› приведет к поломке на каждом устройстве, а не только на устройствах с меньшим или большим экраном. Я мог бы удалить его выборочно с помощью jQuery, но в идеале я ищу решение только для html/css.   -  person cVergel    schedule 13.10.2017
comment
Кроме того, знаете ли вы, какая разница в том, чтобы использовать ‹br› вместо того, чтобы оборачивать вторую строку в ‹span›? Я специально пытался избежать ‹br›, но, похоже, это решение.   -  person cVergel    schedule 13.10.2017
comment
Не берите в голову. Я нашел решение, изменив display на none в соответствующих медиа-запросах. Большое спасибо, однако я не могу проголосовать за комментарий.   -  person cVergel    schedule 13.10.2017

Ответы (3)


arrow_upward
1
arrow_downward

По умолчанию встроенный блок будет перемещен на вторую строку, если весь элемент не помещается в первой строке. Вся группа слов представляет собой единый элемент и пытается быть вставлена ​​в ваш заголовок прямо справа от слова «То». Поскольку слова как группа больше, чем то, что может поместиться в первой строке, она помещает их все на следующую строку, но только после расширения родителя (вашего h2), пытающегося вместить его.

Если вы согласны с переносом текста в span на новую строку, сделайте так, чтобы ваш диапазон отображался как блок, а не как встроенный блок, или переключитесь на div вместо span. Это гарантирует, что текст переместится на новую строку без предварительной попытки расширения родителя по горизонтали. Поскольку встроенный блок в этой ситуации, вероятно, все равно будет иметь разрыв строки, почему бы не сделать это таким образом?

Если вы хотите убедиться, что диапазон не прерывается: тогда вы не можете стилизовать его как встроенный блок или блок. Встроенный блок не сломается, только если его ширина достаточно мала. Не устанавливайте отображение (в интервале) вообще, и ваш заголовок будет переносить текст и занимать всю доступную ширину. Затем добавьте небольшое левое/правое поле к заголовку, так как самое неиспользуемое пространство, которое у вас будет, — это ширина вашего самого длинного слова, перемещаемого на следующую строку.

person Kyle R    schedule 13.10.2017
comment
Спасибо, но это не проблема. Промежуток нужен для того, чтобы заголовок ломался именно там, где я хочу. Я хочу, чтобы он сломался. Если я использую блок вместо встроенного блока, все мои заголовки будут нарушать дизайн макета (а не только этот). Что мне нужно знать, так это то, почему элемент встроенного блока, когда он переходит на вторую строку, не сохраняет ширину своего текста и вместо этого становится 100% ширины родителя. Мне нужно, чтобы каждый заголовок, ломающийся или нет, имел ширину своего текста, а не родительского элемента. - person cVergel; 13.10.2017
comment
Если основная цель пролетов - разорвать линию, и вы не хотите, чтобы другие ломались, то просто избавиться от пролета в других? Я объяснил, почему встроенный блок становится 100%. С display:block span и display:inline-block h2 все ваши заголовки будут продолжать отображаться такими, какие они есть, если у них нет span, и в этом случае они будут отображаться так, как они есть, за исключением того, что текст span будет просто на следующей строке. Разве это не то, что вы хотите? - person Kyle R; 13.10.2017

arrow_upward
0
arrow_downward

Вы можете установить max-width: 80%; на свой .parent h2 css (строка 7), чтобы получить желаемый результат.

person J Livengood    schedule 13.10.2017

arrow_upward
0
arrow_downward

Вы можете установить max-width. См. пример ниже:

.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}
<div id="parent1" class="parent">
  <h2>SHORT HEADING</h2>
  
  <h2>THE REALLY LONG HEADING THAT <span>BREAKS TO A SECOND LINE</span></h2>
</div>

person Red    schedule 13.10.2017
comment
Спасибо, но это не решает проблему. Я не могу установить такую ​​​​максимальную ширину, потому что это сделает другие заголовки, которые не должны ломаться, ломаться, делая его еще хуже. Мне нужно знать, почему заголовок занимает ширину контейнера при переходе на вторую строку, хотя это не является обычным поведением однострочного заголовка с установленным встроенным блоком. Что мне нужно, так это разрыв заголовка, который будет шириной его текста. - person cVergel; 13.10.2017