在段落末尾放置图像时有没有办法避免寡妇？

Question

我有一个网站，客户希望能够在某些链接文本的末尾放置一个风格化的图形。从概念上讲，它是这样的：

<a href="#">This is My Fancy Title<img src="fancypic.png"/></a>

除了某些宽度外，自动换行会导致图像作为寡妇自行换行。

我已经尝试了很多不同的方法，包括widows CSS属性，但似乎没有任何工作100％。

有什么建议吗？

Answer 1

您可以使用white-space: nowrap 这将导致文本和图像不会换行到下一行。

添加一个范围，并在其中放入一个或两个单词并将图像设为inline-block

＆＃13;

＆＃13;

span {
  display: inline-block;
}

＆＃13;

<a href="#">This is My Fancy <span>Title<img src="fancypic.png"/></span></a>

＆＃13;

＆＃13;

＆＃13;