将最后一个字和图片保持在同一行 [英] Keep last word and image on same line

问题描述

使用CSS，有没有办法将最后一个单词和图像都以较窄的宽度换成新的一行?

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><a href="#">Customer Service&nbsp;<img src="http://lorempixel.com/15/15/" alt=""></a>
</div>

<div class="text text-two">
   <p><a href="#">Customer Service&nbsp;<img src="http://lorempixel.com/15/15/" alt=""></a>
</div>

推荐答案

我在< a> 元素上添加了负的右边距，以匹配图像宽度.
这样可以防止图像触发换行.
仅当文本本身不适合时，该行才会换行.

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><a href="#">Customer Service&nbsp;<img src="http://lorempixel.com/15/15/" alt=""></a></p>
</div>

<div class="text text-two">
  <p><a href="#">Customer Service&nbsp;<img src="http://lorempixel.com/15/15/" 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"

这篇关于将最后一个字和图片保持在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！