使用CSS，有没有办法将最后一个单词和图像都以较窄的宽度换行？
http://jsfiddle.net/2koc2deo/3/ http://jsfiddle.net/2koc2deo/3/
.text-two {
width: 125px;
}
.text {
font-size: 16px;
}
<div class="text text-one">
<p><a href="#">Customer Service <img src="http://lorempixel.com/15/15/" alt=""></a>
</div>
<div class="text text-two">
<p><a href="#">Customer Service <img src="http://lorempixel.com/15/15/" alt=""></a>
</div>
我添加了一个负的右边距<a>元素，以匹配图像宽度。
这可以防止图像触发换行。
仅当文本本身不适合时，该行才会换行。
这在容器的右侧溢出仍然可见的情况下效果最好。
.text {
font-size: 16px;
}
.text-two {
width: 118px;
}
.text a {
margin-right: -15px;
}
<div class="text text-one">
<p><a href="#">Customer Service <img src="https://fakeimg.pl/15x15/" alt=""></a></p>
</div>
<div class="text text-two">
<p><a href="#">Customer Service <img src="https://fakeimg.pl/15x15/" alt=""></a></p>
</div>
该解决方案的灵感来自Beauceron 对“将字体图标附加到文本字符串中的最后一个单词并防止换行”的回答 https://stackoverflow.com/questions/16246099/attach-font-icon-to-last-word-in-text-string-and-prevent-from-wrapping#answer-30741224
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
