Keep Last Word And Image On Same Line

With CSS, is there a way to break both the last word and the image to a new line at the narrower width? http://jsfiddle.net/2koc2deo/3/

Solution 1:

I added a negative right margin to the <a> elements, to match the image width. This prevents the images from triggering a line wrap. The line will only wrap if the text itself doesn't fit.

This works best in contexts where the right overflow of the container will still be visible.

.text {
  font-size: 16px;
}

.text-two {
  width: 118px;
}

.texta {
  margin-right: -15px;
}

<divclass="text text-one"><p><ahref="#">Customer Service&nbsp;<imgsrc="https://fakeimg.pl/15x15/"alt=""></a></p></div><divclass="text text-two"><p><ahref="#">Customer Service&nbsp;<imgsrc="https://fakeimg.pl/15x15/"alt=""></a></p></div>

This solution is inspired by Beauceron's answer to "Attach font icon to last word in text string and prevent from wrapping"

Solution 2:

I couldn't get the above to work. I fixed mine by putting a span around the last word and the image and use white-space: nowrap;.

Here's a fiddle:

.text-two {
   width: 125px;
}

.text {
   font-size: 16px;
}

.no-wrap {
   white-space: nowrap;
}

<divclass="text text-two"><p>Customer <spanclass="no-wrap">Service <imgsrc="http://lorempixel.com/15/15/"alt=""></span></p></div>