Кросс-браузерная подсказка для разрыва слова

Question

В Chrome я могу указать, где я хочу, чтобы мой текст был обернут комбинацией <wbr> а также white-space: nowrap;, Но в Firefox или IE текст просто вытекает из поля и <wbr> игнорируется Правильно ли интерпретирует спецификацию Chrome или это просто странная, но полезная ошибка реализации? Существует ли кросс-браузерное решение для подсказок с переносом текста?

.headline-container {
  width: 50%;
  border: 1px solid red;
}

h1 {
  white-space: nowrap;
}

@media (max-width: 400px) {
  h1 {
   white-space: normal;
  }
}

<div class="headline-container">
<h1>This headline could <wbr>wrap in the middle <wbr>but only on Chrome</h1>
</div>

Этот ответ имеет ту же проблему - он не работает в Firefox для меня.

Answer 1

Вот реализация предложения от @CBroe ...

.headline-container {
  width: 70%;
  border: 1px solid red;
}
.h1-line {
  display: inline-block;
}
@media (max-width: 400px) {
  .h1-line {
    display: inline;
  }
}

<div class="headline-container">
  <h1><span class="h1-line">This headline could</span> <span class="h1-line">wrap in the middle</span></h1>
</div>