Question

使用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>

Answer 1

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

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

＆＃13;

.text {
  font-size: 16px;
}
.text-two {
  width: 118px;
}
.text a {
  margin-right: -15px;
}

＆＃13;

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

＆＃13;

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

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

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

2 个答案: