如何避免“：before”之后的换行符在CSS [英] How to avoid line breaks after ":before" in CSS

问题描述

在我的网站上，我对某些链接类型使用字体图标。这些图标是通过：之前 CSS语法添加的。

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

然而，当这个链接在一行的开头时，从其图标：

我尝试添加 white-space：nowrap 到上面的CSS规则，但是没有帮助。

如何将图标和文字保持在一起？（CSS 3很好）

注意：我不想使用 white-space：nowrap 来格式化整个链接。

display：inline-block; 似乎可以解决这个问题：

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

JSFiddle 。

不幸的是，你需要display：inline-block来显示SVG。简单的解决方案是把display：inline-block放在a上。这将导致你的SVG正确渲染，它会保持你的a：之前和a在一起在一条线。

On my website I'm using font icons for certain link types. These icons are added via :before CSS syntax.

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

However, when this link is at the beginning of a line, it's sometimes separated from its icon:

I tried adding white-space: nowrap to the CSS rule above but that didn't help.

How do I keep the icon and the text together? (CSS 3 is okay)

Note: I don't want to format the whole link with white-space: nowrap.

解决方案

Simply removing the display:inline-block; seems to fix this issue:

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

JSFiddle.

Unfortunately, you need "display: inline-block" to show SVG. Simple solution is to put "display: inline-block" on the "a". This will cause your SVG to render properly AND it will keep your a:before and the a together on one line.

这篇关于如何避免“：before”之后的换行符在CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！