Стрелки ссылки падают на новую строку

Question

У меня есть боковая панель со списком ссылок, и каждая ссылка имеет значок стрелки справа от нее (установите в стилях привязки с помощью селектора:after). На многих ссылках стрелка опускается до собственной линии. Я хочу убедиться, что текст может перейти на новую строку по мере необходимости, но не допускать, чтобы стрелка была осиротевшей на отдельной строке.

Я думал, что решил проблему, используя "white-space: nowrap" в псевдоэлементе:after, потому что это работало в 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

Answer 1

Я считаю, что я решил проблему. Я изменил стили, чтобы изображение стрелки было установлено в качестве фона привязки, и расположил его вправо, используя отступы, вместо того, чтобы устанавливать изображение стрелки как: после содержимого. Работает во всех упомянутых браузерах: граница: 0 background: url('images/icon_arrow.png') без повтора вправо по центру padding-right: 15px

Answer 2

Самым простым решением, вероятно, является использование символа, а не изображения в сгенерированном контенте, например

content: '\bb';

использовать "" "U+00BB ПРАВИЛЬНО-ТОЧЕЧНУЮ КАРТУ-КАРТУ ДВОЙНОГО УГЛА, которая напоминает изображение, которое вы сейчас используете, или

content: '\2192';

использовать символ стрелки "→" U+2192 СТРЕЛКА ВПРАВО.

Причина, по которой IE ведет себя странным образом, заключается в том, что он обычно рассматривает изображение как допускающее разрыв строки перед ним, при отображении во встроенном контексте, даже когда не вводится пробел (например, sometext<img ...>). Когда вместо этого вы используете символ без пробела перед ним, IE применяет правила разрыва строки текста (которые очень странны в IE, но не допускают разрыва строки, например, перед "" "в" foo "").