将最后一个单词和图像保持在同一行答案

【问题标题】：Keep last word and image on same line将最后一个单词和图像保持在同一行
【发布时间】：2015-08-19 17:08:35
【问题描述】：

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

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

【问题讨论】：

我想，你可以在css3中使用::last-word标签。
::last-word 不是一个东西。除非你以某种方式填充它。这是一个相关的问题/答案：stackoverflow.com/q/9268386/221867

标签： html css

【解决方案1】：

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

这在容器的右溢出仍然可见的情况下效果最佳。

.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="https://fakeimg.pl/15x15/" alt=""></a></p>
</div>

<div class="text text-two">
  <p><a href="#">Customer Service&nbsp;<img src="https://fakeimg.pl/15x15/" alt=""></a></p>
</div>

这个解决方案的灵感来自Beauceron's answer to "Attach font icon to last word in text string and prevent from wrapping"

【讨论】：

【解决方案2】：

我无法让上述工作。我通过在最后一个单词和图像周围放置一个跨度并使用white-space: nowrap; 来修复我的问题。

这是一个小提琴：

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

【讨论】：