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

Question

问题

我使用 ::before 生成一个伪元素来显示链接 anchor 文本左侧的小图像。但是，当调整浏览器窗口的宽度时，该行可能会在小图像和链接 anchor 文本的第一个单词之间换行，这是不希望出现的情况。

期望的结果

我想将小图片和链接 anchor 文本的第一个词放在同一行。

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

此外，链接之后的文本应与链接 anchor 文本的最后一个词在同一行上(当然前提是第一个词有空格)。

注意 1) 如果我在 a 标签上使用 display:inline-block，整个链接 anchor 文本将作为一个整体换行，这是我不希望的。

注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

问题是换行发生在伪元素和内容之间，所以你不能通过只给伪元素设置white-space来避免它。

相反，您可以将 anchor 的内容包裹在一个 span 中，将 white-space: nowrap 设置为整个 anchor ，并恢复初始的 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.