<分区>
html - 使链接图标与最后一个词断开
Possible Duplicate:
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;
}
最佳答案
不幸的是，我认为要确保这适用于跨浏览器，您必须将最后一个单词包装在一个 span 中，然后将图标应用于该 span。
<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;
}
关于html - 使链接图标与最后一个词断开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14567596/