Cross-Browser-Hinweise für Word Break

Question

In Chrome kann ich angeben, wo ich meinen Text mit einer Kombination von <wbr> und white-space: nowrap; umbrechen möchte. Aber in Firefox oder IE fließt der Text einfach aus der Box und <wbr> wird ignoriert. Interpretiert Chrome die Spezifikation richtig oder ist dies nur ein skurriler, wenn auch nützlicher Implementierungsfehler? Gibt es eine browserübergreifende Lösung für Text-Wrapping-Hinweise?

.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>

This answer hat das gleiche Problem-es nicht für mich in Firefox funktioniert.

Answer 1

Hier ist eine Implementierung eines Vorschlages von @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>