Question

问题

我使用$blog = Blog::popular(1999)-get();生成一个伪元素，以显示链接锚文本左侧的小图像。但是，当重新调整浏览器窗口的宽度时，该行可能会包含在小图像和链接锚文本的第一个单词之间，这是不希望的。

期望的结果

我想将小图像和链接锚文本的第一个单词放在同一行上。

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

此外，链接后的文本应与链接锚文本的最后一个单词在同一行继续（前提是当前第一个单词有空格）。

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

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

注3）我尝试在伪元素上设置display:inline-block，但这并没有解决问题。

谢谢！

代码

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

我的HTML：

white-space: pre

我的CSS：

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

Answer 1

问题在于伪元素和内容之间发生换行，因此您只能通过将white-space设置为伪元素来避免它。

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

如果我们最终得到一个：第一个词选择器（Chris Coyier的伟大帖子：https://css-tricks.com/a-call-for-nth-everything/），那真的很酷，你可能需要一个额外的跨度来做到这一点。这是你小提琴上的一个叉子，看起来像你所描述的那样：

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">的第一个单词周围插入跨度 - 但如果你是专门添加那个类，也许这不是很费劲手动降低跨度...取决于你的疼痛耐受性，我想： - ）

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

问题

期望的结果

代码

2 个答案: