使链接图标与最后一个单词断开

Question

  

可能重复：
  Add link icon that breaks with last word?

当文本对于容器来说太长时，我想将最后一个单词分成新行，而不是仅仅在它后面出现的背景图像。

以下是该问题的主要内容：

我想要“太”这个词。与背景图像一起打破下一行。

这是HTML：

<ul>
    <li><a href="#" class="myIcon">The name of some link goes here</a></li>
    <li><a href="#" class="myIcon">The name of some link goes here too.</a></li>
    <li><a href="#" class="myIcon">Here is yet another link that could be used</a></li>
    <li><a href="#" class="myIcon">This could be a really long link that one could try to use also</a></li>
    <li><a href="#">The name of some link goes here.</a></li>
    <li><a href="#">The name of some link goes here.</a></li>
    <li><a href="#">The name of some link goes here.</a></li>
</ul>

这是CSS：

.myIcon:after {
    height: 16px;
    width: 16px;
    display:inline-block;
    content:'';
    background-image: url("/wps/themes/html/3M.com/images/ui-icons_000000_256x240.png");
    vertical-align:middle;
}

Answer 1

你可以在你的CSS中尝试一个破解词，它会自动强制你的文本在一定长度后换行：

.myIcon:after {
height: 16px;
width: 16px;
display:inline-block;
content:'';
background-image: url("/wps/themes/html/3M.com/images/ui-icons_000000_256x240.png");
vertical-align:middle;
word-wrap: break-word;
}

Answer 2

不幸的是，我认为要确保这在浏览器中有效，您必须在一个范围中包装最后一个单词，然后将该图标应用于跨度。

<li><a href="#">This could be a really long link that one could try to use <span class="myIcon">also</span></a></li>

CSS：

.myIcon {
    display:inline-block;
    background: url("/wps/themes/html/3M.com/images/ui-icons_000000_256x240.png") no-repeat center right;
    padding-right:16px;
    white-space:nowrap;
    text-decoration:underline;
}

Example is here