cssテキストを折り返すときにイメージを単語の一部として扱います

Question

固定幅のconatinerとその内部にh3タグがあります。 h3タグ内のテキストがコンテナをオーバーフローすると、デフォルトとして単語をまとめたまま他の行に折り返します。私はそれの前の単語に接続されているインラインイメージを埋め込みたいので、ラップが発生するとその単語の一部として扱われます。 exampleこの例では、太陽のアイコンが新しい行に分かれていますが、これは 'need'という単語の一部として扱われたいので、 'need'という単語を新しい行に壊してしまいます。太陽のアイコン。 fiddle

Answer 1

ホワイトラップウールラップが適用されたコンテナを使用する必要があります。

.holder { 
 
    width: 150px; 
 
    height: 100px; 
 
    border: 1px solid; 
 
} 
 

 
img { 
 
    width: 0.9em; 
 
    position: relative; 
 
    top: 3px; 
 
} 
 

 
span { 
 
    word-space: nowrap; 
 
    display: inline-block; 
 
}

<div class="holder"> 
 
    <h3>Example text <span>need<img src="http://files.softicons.com/download/web-icons/vector-stylish-weather-icons-by-bartosz-kaszubowski/png/256x256/sun.rays.small.png" alt=""></span> more words </h3> 
 
</div>

Answer 2

あなたのhtmlを変更する気にしない場合は、display: inline blockを持つ要素（div要素、スパン、何でも）で画像を単語をラップし、それらをすることができます。 fiddleを変更しました。