添加与最后一个词分隔的链接图标？ [英] 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屋！