链接箭头下降到新行(Link arrows dropping to new line)

我有一个链接列表的侧边栏和每个环节都有一个箭头图标，它的右边（在使用锚风格设置：选择后）。 在许多环节中，箭头下降到自己的路线。 我想确保文本可以打破根据需要一个新的生产线，但阻止箭头从自身成为孤儿到线。

我以为我已经使用解决了这个问题，因为在Firefox工作伪元素之后：“白色空间：NOWRAP”上。 不幸的是，我发现它不是在IE8，Chrome和Safari浏览器工作。

有没有一种方法，以防止破坏其自身的线路，同时还允许在链接的文本换行根据需要，在Firefox，IE8，Chrome和Safari中的链接图标？

基本的HTML结构：

<div id="sidebar">
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Link 12</a></li>
  </ul>
</div>

样式规则（写在SASS）：

div#sidebar
  width: 170px

  a:after
    content: url('images/icon_double-arrow.png')
    margin: 0 0 0 6px
    white-space: nowrap

Answer 1:

我相信我解决了问题。 我改变了风格，使箭头图像被设置为锚定背景和使用填充，而不是设置的箭头图像，因为它位于右侧：内容之后。 工程在所有浏览器中提到：边框：0背景：网址（“图像/ icon_arrow.png”）不重复右心填充右：15px的

Answer 2:

最简单的解决方案可能是在生成的内容，例如，使用一个字符，而不是图像

content: '\bb';

使用“»” U + 00BB右向双角引号，这类似于现在正在使用的图像，或

content: '\2192';

使用箭头字符“→” U + 2192向右箭头。

为什么IE的行为的原因奇怪似乎是，它通常把一个图像作为允许之前它换行符，在直列方面出现时，即使当没有空间介入（例如sometext<img ...> 当您改用字符，之前没有空格字符，IE应用换行文本的规则（这是在IE很奇怪 ，但不允许，例如之前为“foo»”中的“»”一个换行符）。

文章来源: Link arrows dropping to new line