css將圖像作爲一個詞的一部分，當包裝文字

我有一個固定的寬度conatiner和一個h3標籤裏面。當h3標籤中的文本溢出我的容器時，它將包裝到另一行中，同時將單詞保留爲默認值。我想嵌入一個連接到它之前的單詞的內聯圖像，所以當包裝發生時，它被視爲該單詞的一部分。 example正如在例子中看到的那樣，太陽圖標分成一個新行，而我希望它被視爲單詞'need'的一部分，所以頁面會將'need'這個單詞打破爲一個新行太陽圖標。 fiddle
css將圖像作爲一個詞的一部分，當包裝文字

來源

2017-07-18 Vamate

只增加'.holder' div的寬度。 – Pratikshya

您需要使用應用了白色空間nowrap的容器。

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

來源

2017-07-18 23:56:23 Kiwad

如果你不介意修改你的HTML，你可以用這個詞，並將其圖像中的元素（DIV，跨度，等等）與display: inline block。我修改了您的fiddle。

來源

2017-07-18 23:59:56 arbuthnott

css將圖像作爲一個詞的一部分，當包裝文字

回答

相關問題