Zeilenumbruch nach Inline-Block verhindern

Question

In einer Seite habe ich einen Container mit fester Breite, der ein Inline-Block-Element enthält, gefolgt von einem Text.

Manchmal ist dieser Text breiter als der Container. Wenn dies passiert, möchte ich, dass es in die nächste Zeile springt (wie im ersten Beispiel unten zu sehen).

Manchmal ist dieser Text auch zu breit, um im Container angezeigt zu werden. Wenn dies passiert, möchte ich, dass der Überschuss abgeschnitten wird (overflow: hidden). Wenn ich dies jedoch auf die naheliegende Weise versuche, wird nach dem Inline-Block-Element ein Zeilenumbruch eingefügt (wie im zweiten Beispiel zu sehen ist).

Ich kann umgehen, indem Sie das Inline-Block-Element und den ersten Buchstaben des Textes zusammen in einem <nobr> Element (wie im dritten Beispiel gesehen - oder einem gleichwertigen white-space:nowrap Wrapper), aber das scheint wie ein wirklich hässliche Art, über Dinge zu gehen. Gibt es einen besseren Weg, dies zu tun?

.container { 
 
    outline: 2px solid blue; 
 
    width: 150px; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
} 
 

 
.inlineblock { 
 
    display: inline-block; 
 
    width: 30px; height: 1.5em; vertical-align: middle; 
 
    background: gray; 
 
}

<div class="container"> 
 
    <span class="inlineblock"></span>line breaks only at spaces 
 
</div> 
 

 
<div class="container"> 
 
    <span class="inlineblock"></span>widetextwidetextwidetext second line 
 
</div> 
 

 
<div class="container"> 
 
    <nobr><span class="inlineblock"></span>w</nobr>idetextwidetextwidetext ugly workaround 
 
</div>

Answer 1

Es sieht aus wie das erste Zeichen muss nicht im <nobr> Elemente sein, so dass dies funktionieren wird:

<nobr><span class="inlineblock"></span></nobr>wide... 

noch hässlich, aber auf jeden Fall weniger hässlich! Es funktioniert zumindest in Firefox und Chrome.