0

可能重复：
添加与最后一个单词断开的链接图标？

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

这是问题的一个例子：文本不与背景图像中断。

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

这是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;
}
4

2 回答 2

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;
}
于 2013-01-28T17:51:01.110 回答
1

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

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

例子在这里

于 2013-01-28T17:52:22.903 回答