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

Question

问题

我::before用来生成一个伪元素来显示链接的锚文本左边的一个小图像.但是,当重新调整浏览器窗口的宽度时,该行可能会被包裹在小图像和链接锚文本的第一个单词之间,这是不希望的.

期望的结果

我想将小图像和链接锚文本的第一个单词保持在同一行.

我保留display: inline在a-tag上,因为链接锚文本应该能够包裹行,而不是整个原子盒,但是它的第一个单词填满当前行,任何剩余的单词继续在下一行.

此外,链接后的文本应与链接锚文本的最后一个单词在同一行继续(前提是当前第一个单词有空格).

注1)如果我display:inline-block在a-tag上使用,整个链接锚文本将作为一个整体包装,这是我不想要的.

注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只设置伪元素来避免它.

相反,您可以将锚的内容包装在范围内,设置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.