添加与最后一个词分隔的链接图标? [英] Add link icon that breaks with last word?
问题描述
是否可以在最后一个单词断开的链接后添加图标?
Is it possible add an icon after a link that breaks with the last word?
:
content
都会在Chrome中破坏。
:after
and content
both break in Chrome.
测试: http://jsfiddle.net/V32Wd/1/
推荐答案
对于标记< a class =afterhref =#>图标不应该分开< / a>
,请使用以下CSS代码: / p>
For the markup <a class="after" href="#">The icon should not break alone</a>
, use the following CSS code:
a.after:after {
content: '\feff' url('...');
padding-left: 4px;
white-space: nowrap;
}
添加'\feff' code>表示添加U + FEFF ZERO WIDTH NO-BREAK SPACE,一个不可见的控制字符,用于防止前后的换行。这有助于Chrome和IE,但不适用于Firefox。添加
white-space:nowrap
处理Firefox上的问题;这是不合逻辑的,因为从定义上来说,它只能防止伪元素内部的换行符,并且问题是正常内容和伪元素之间的换行符,因为它有助于我们在这里使用它。
The addition of '\feff'
means adding U+FEFF ZERO WIDTH NO-BREAK SPACE, an invisible control character that prevents line breaks before and after. This helps on Chrome and IE, but not on Firefox. Adding white-space: nowrap
deals with the issue on Firefox; this is illogical since by definition it only prevents line breaks inside the pseudo-element, and the issue is a line break between the normal content and the pseudo-element—anyway, since it helps, let’s use it here.
一个更常见的方法是为位于右侧的 a
元素添加一个图标作为背景图片。这避免了换行问题。
A more common approach is to add an icon as a background image for the a
element, placed at the right. This avoids the line breaking issue.
这篇关于添加与最后一个词分隔的链接图标?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!