避免在 ::before 伪元素和下一个单词之间换行

Question

问题

我用::before生成一个伪元素来显示links锚文本左边的小图。但是，当调整浏览器 window 的宽度时，该行可能会在小图像和 link 锚文本的第一个单词之间换行，这是不希望的。

想要的结果

我想把link锚文本的小图和第一个字放在同一行。

我在 a-tag 上保留 display: inline 因为 link 锚文本应该能够换行，而不是作为一个完整的原子框，但这样它的第一个词就会填充在当前行上，所有剩余的单词在下一行继续。

此外， link 之后的文本应继续与 link 锚文本的最后一个字在同一行（前提是 space当然是第一个词）。

注意 1) 如果我在 a-tag 上使用 display:inline-block，整个 link 锚文本将作为一个整体换行，这是我不想要的。

注2）我在伪元素上使用了display:inline-block，因为我需要设置它的宽度和高度。

注3）我试过在伪元素上设置white-space: pre，但没有解决问题。

谢谢！

密码

代码位于 JSFiddle 并在下面重复以确保完整性。

我的HTML:

<p>
Text text <a class="pre-icon" href="#">FirstWord word2 word3</a> text after link.
</p>

我的CSS:

.pre-icon::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 10px;
    background-color: transparent;
    background-image: url(data:image/gif;base64,R0lGODlhBgAKAJEAADM2Zv///////wAAACH5BAUUAAIALAAAAAAGAAoAAAINBIRimdvHFETOUWglKwA7);
    background-repeat: no-repeat;
    margin-left: .13em;
    margin-right: .25em;
    white-space: nowrap;
}

Answer 1

虽然如果我们最终能得到一个 :first-word 选择器（Chris Coyier 关于此的 post 很棒：https://css-tricks.com/a-call-for-nth-everything/），那将非常酷，但您可能需要一个额外的跨度去做这个。这是你的 fiddle 上的一个叉子，它看起来像你描述的那样：

https://jsfiddle.net/0hrn2Lao/

HTML:

<p>Text text <a class="pre-icon" href="#">
  <span>FirstWord</span> word2 word3</a> text after link.
</p>

CSS:

.pre-icon span {
  display:inline-block;
  text-decoration:underline;}

.pre-icon span::before {
  content:"";
  display:inline-block;
  width:6px;
  height:10px;
  background-color:transparent;
  background-image:url(data:image/gif;base64,R0lGODlhBgAKAJEAADM2Zv///////wAAACH5BAUUAAIALAAAAAAGAAoAAAINBIRimdvHFETOUWglKwA7);
  background-repeat:no-repeat;
  margin-left:.13em;
  margin-right:.25em;
  white-space:nowrap;
}

基本上，将带有图像的伪元素放在包含第一个单词的跨度上，然后让跨度为 inline-block，而不必将 inline-block 规则放在 <a> 元素本身。

如果您愿意，您可以使用一些 jQuery 在整个文档的 <a class="pre-icon"> 的第一个单词周围插入跨度 - 但如果您专门添加 class ，也许手动降低跨度也不是很费力……我想取决于你的疼痛耐受性:-)

Answer 2

问题是换行发生在pseudo-element和内容之间，所以你不能通过将white-space设置为pseudo-element来避免它。

相反，您可以将锚点的内容包裹在一个范围内，将 white-space: nowrap 设置为整个锚点，并恢复范围内的初始 white-space: normal。

.pre-icon {
  white-space: nowrap;
}
.pre-icon > span {
  white-space: normal;
}

.pre-icon::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 10px;
  background-color: transparent;
  background-image: url(data:image/gif;base64,R0lGODlhBgAKAJEAADM2Zv///////wAAACH5BAUUAAIALAAAAAAGAAoAAAINBIRimdvHFETOUWglKwA7);
  background-repeat: no-repeat;
  margin-left: .13em;
  margin-right: .25em;
}
.pre-icon {
  white-space: nowrap;
}
.pre-icon > span {
  white-space: normal;
}

Text text <a class="pre-icon" href="#"><span>FirstWord word2 word3</span></a> text after link.

避免在 ::before 伪元素和下一个单词之间换行

Avoid line wrap between ::before pseudo-element and next word

css

word-wrap

pseudo-element

问题

想要的结果

密码