CODEWITHSUNDEEP
htmlcss
Vamate
Vamate

Reputation: 41

css treat image as part of a word when wrapping text

I have a fixed width conatiner and a h3 tag inside it. When the text in the h3 tag would overflow my container it wraps into an other line while keeping words together as default. I want to embed an inline image which is connected to the word before it, so when the wrap occurs it is treated as a part of that word. example As seen in the example the sun icon breaks into a new line, while i want it to be treated as it is the part of the word 'need', so the page would break the 'need' word into a new line with the sun icon. fiddle

Upvotes: 3

Views: 1720

Answers (2)

arbuthnott
arbuthnott

Reputation: 3819

If you don't mind modifying your html, you can wrap the word and them image in an element (div, span, whatever) with display: inline block. I modified your fiddle.

Upvotes: 3

JFC
JFC

Reputation: 586

You need to use a container with white-space nowrap applied on it.

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

Upvotes: 2

Related Questions