css - 链接箭头放到新行

我有一个带有链接列表的边栏，每个链接在其右侧都有一个箭头图标（使用：after选择器以锚样式设置）。在许多链接上，箭头下拉至其自己的线。我想确保文本可以根据需要中断到新行，但要防止箭头被孤立到一行上。

我以为我已经通过在：after伪元素上使用“ white-space：nowrap”解决了问题，因为它在Firefox中有效。不幸的是，我发现它无法在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

最佳答案

我相信我已经解决了这个问题。我更改了样式，以便将箭头图像设置为锚点背景，并使用填充将其定位在右侧，而不是将箭头图像设置为：after content。在所有提到的浏览器中均可使用：边框：0背景：url（'images / icon_arrow.png'）无重复右居中填充-右：15px

关于css - 链接箭头放到新行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12995066/