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将图像作为一个词的一部分，当包装文字

回答

相关问题