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

【问题标题】：Avoid line wrap between ::before pseudo-element and next word避免 ::before 伪元素和下一个单词之间的换行
【发布时间】：2016-01-26 02:05:36
【问题描述】：

问题

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

想要的结果

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

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

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

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

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

【问题讨论】：

类似this ?

标签： css pseudo-element word-wrap

【解决方案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 &lt;a class="pre-icon" href="#"&gt;&lt;span&gt;FirstWord word2 word3&lt;/span&gt;&lt;/a&gt; text after link.

【讨论】：

谢谢，一个简短而简洁的解决方案！

【解决方案2】：

虽然如果我们最终能够获得一个 :first-word 选择器会非常酷（Chris Coyier 的精彩帖子：https://css-tricks.com/a-call-for-nth-everything/），但您可能需要额外的 span 才能做到这一点。这是你小提琴上的一个叉子，看起来正在做你描述的事情：

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

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

如果您愿意，您可以使用一些 jQuery 在整个文档中插入 <a class="pre-icon"> 的第一个单词周围的跨度 - 但如果您专门添加该类，也许只需删除手动跨度也...取决于您的疼痛承受能力，我猜:-)

【讨论】：