如何避免CSS中“：之前”之后的换行符

Posted 2023-03-05

【中文标题】如何避免CSS中“：之前”之后的换行符

【英文标题】：How to avoid line breaks after ":before" in CSS

【发布时间】：2013-01-28 20:49:00

【问题描述】：

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

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

但是，当此链接位于行首时，它有时会与其图标分开：

我尝试在上面的 CSS 规则中添加 white-space: nowrap，但这没有帮助。

如何将图标和文本放在一起？（CSS 3 可以）

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

【参考方案1】：

避免在锚点和 :before 之间缠绕的最佳解决方案是：

a.some-link 
    display: inline-block;

a.some-link::before 
    content: 'x';

奖金！ 避免在悬停时为 :before 加下划线：

a.some-link::before 
    display: inline-block;

【参考方案2】：

只需删除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:before 和 a 保持在同一行。

【讨论】：

为了记录，这个工作的原因是因为如果你删除 inline-block 规范，它默认为 inline。一旦被认为是内联的，它就会遵循当前的分词规则，就好像你的伪元素只是句子中的另一个字母一样。

【参考方案3】：

在:beforecss中添加nowrap规则会好很多：

white-space: nowrap;

更新：http://jsfiddle.net/MMbKK/5/

nowrap 规则的原因是可以正常处理:before 中的图像内容。文本内容不需要这条规则来靠近主要元素。

【讨论】：

这有什么特别的原因吗？我认为你应该详细说明你的答案。

OP 指定他们不是在寻找nowrap 解决方案。

呃，对不起，我是这个社区的新手，之前没有看到通知。 nowrap 内 :before CSS 规则适用于我的情况。可能只是在我的主浏览器中。 a.tooltipWord:before content: url('..../quest_min.gif'); white-space: nowrap; 哦，我还不够清楚，我现在明白了。关键是将inline-block 规则更改为nowrap 一个，而不是将它们相加。

谢谢你，@m-patel :) 我更新了我的评论并给出了解释。