1

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

2 回答 2

0

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

于 2013-09-30T18:10:57.270 回答
-1

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

content: '\bb';

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

content: '\2192';

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

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

于 2012-10-21T06:37:53.623 回答