链接箭头下降到新行答案

【问题标题】：Link arrows dropping to new line链接箭头下降到新行
【发布时间】：2012-10-11 07:07:24
【问题描述】：

我有一个带有链接列表的侧边栏，每个链接的右侧都有一个箭头图标（使用 :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

【问题讨论】：

Not seeing your problem，缺少什么？您能否（在您的 Web 开发人员工具中）看到各种对象的指标是什么？是否有定义的宽度（在生成的内容中，a 或 li 元素）强制换行？
你能发一个fiddle模仿这种情况吗？
如果没有实际的图标图像，您可能无法看到问题，因为那是下降到它自己的行的内容。唯一定义的宽度在包含的 div 和 UL 上（设置为宽度：159px；）如果您在 IE8、Safari 或 Chrome 中加载它，您可以在此页面上看到一个示例：example in the right sidebar
我相信我解决了这个问题。我更改了样式，以便将箭头图像设置为锚背景，并使用填充将其定位在右侧，而不是将箭头图像设置为 :after 内容。适用于所有提到的浏览器：a border: 0 background: url('images/icon_arrow.png') no-repeat right center padding-right: 15px
那么您应该将其发布为答案，并（在几天内，当您能够）接受该答案作为您问题的解决方案。

标签： css internet-explorer-8 css-selectors whitespace nowrap

【解决方案1】：

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

content: '\bb';

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

content: '\2192';

使用箭头字符“→” U+2192 RIGHTWARDS ARROW。

IE 行为异常的原因似乎是它通常将图像视为允许在其前面换行，当出现在行内上下文中时，即使没有空格介入（例如sometext<img ...>）。当您改用一个字符时，它前面没有空格字符，IE 应用文本的换行规则（它们是very odd in IE，但不允许换行，例如在“foo»”中的“»”之前）。

【讨论】：

【解决方案2】：

我相信我解决了这个问题。我更改了样式，以便将箭头图像设置为锚背景，并使用填充将其定位在右侧，而不是将箭头图像设置为 :after 内容。适用于所有提到的浏览器：边框：0 背景：url('images/icon_arrow.png') no-repeat right center padding-right: 15px

【讨论】：