インラインブロック後の改行を防止する

Question

ページ内に、インラインブロック要素を含む固定幅のコンテナがあり、その後にテキストが続きます。

場合によっては、このテキストがコンテナよりも広いことがあります。これが起こると、私はそれを次の行に壊したい（以下の最初の例に見られるように）。

場合によっては、このテキストもコンテナ内に表示するには幅があります。これが起こると、超過分を切り捨てる（overflow: hidden）ようにします。しかし、これを明白な方法でやってみると、inline-block要素の後に改行が挿入されます（2番目の例のように）。

インラインブロック要素とテキストの最初の文字を<nobr>要素（3番目の例または同等のラッパーであるwhite-space:nowrapラッパー）にまとめることで回避できますが、これは本当に物事について行く醜い方法。これを行うより良い方法はありますか？

.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

最初の文字は<nobr>要素である必要はありませんので、これは動作しますように見えます：

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

それでも醜い、間違いなく少ない醜いです！ FirefoxとChromeで少なくとも動作します。