Как избежать разрывов строк после «: before» в CSS

Question

На моем веб-сайте я использую значки шрифтов для определенных типов ссылок. Эти значки добавляются через :before синтаксис CSS.

a.some-link:before { 
    font-family: icons; 
    display: inline-block; 
    padding-right: 0.3em; 
    content: 'x'; 
} 

Однако, когда эта ссылка находится в начале строки, она иногда отделяется от иконы:

Я попытался добавления white-space: nowrap правилу CSS выше, но это не Помогите.

Как сохранить значок и текст вместе? (CSS 3 это нормально)

Примечание: Я не хочу, чтобы отформатировать ссылку весь с white-space: nowrap.

Answer 1

Просто удаление display:inline-block;, кажется, решить эту проблему:

a.some-link:before { 
    font-family: icons; 
    padding-right: 0.3em; 
    content: 'x'; 
} 

JSFiddle.

К сожалению, для отображения SVG вам понадобится «display: inline-block». Простым решением является установка «display: inline-block» на «a». Это приведет к тому, что ваш SVG будет правильно отображаться, и он сохранит ваши: и раньше, и а вместе в одной строке.

Answer 2

Это гораздо лучше, чтобы добавить nowrap правило :before CSS:

white-space: nowrap; 

UPD: http://jsfiddle.net/MMbKK/5/

Причина nowrap правила является для правильной работы с содержанием изображения в :before. Текстовому контенту не требуется это правило, чтобы оставаться рядом с основным элементом.