如何避免CSS中":before"之后的换行符

Question

在我的网站上,我使用某些链接类型的字体图标.这些图标是通过:beforeCSS语法添加的.

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.

不幸的是,您需要"display:inline-block"来显示SVG.简单的解决方案是在"a"上放置"display:inline-block".这将使您的SVG正确呈现并且它将保持a:before和a在一行上.

Answer 2

最好在 cssnowrap中添加规则:before：

white-space: nowrap;

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

规则的原因nowrap是为了正确处理:before. 文本内容不需要此规则来保留在主要元素附近。