Keep last word and image on same line - html

Question

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/
.text-two {
width: 125px;
}
.text {
font-size: 16px;
}
<div class="text text-one">
<p>Customer Service <img src="http://lorempixel.com/15/15/" alt="">
</div>
<div class="text text-two">
<p>Customer Service <img src="http://lorempixel.com/15/15/" alt="">
</div>

Answer 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;
}
.text a {
margin-right: -15px;
}
<div class="text text-one">
<p>Customer Service <img src="https://fakeimg.pl/15x15/" alt=""></p>
</div>
<div class="text text-two">
<p>Customer Service <img src="https://fakeimg.pl/15x15/" alt=""></p>
</div>
This solution is inspired by Beauceron's answer to "Attach font icon to last word in text string and prevent from wrapping"

Answer 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;
}
<div class="text text-two">
<p>Customer <span class="no-wrap">Service <img src="http://lorempixel.com/15/15/" alt=""></span></p>
</div>