在多行标记中使用伪元素时如何避免空格？答案

【问题标题】：How can I avoid space while using pseudo-elements in multi-line markup?在多行标记中使用伪元素时如何避免空格？
【发布时间】：2017-02-19 01:36:10
【问题描述】：

我在这里提出了一个问题：How to avoid spaces when wrapping markup across multiple lines，并了解到我可以在跨多行编写标记时避免空格。但是，当我将此方法应用于具有伪元素::before 和::after 的元素时，它不起作用。

同样，如果我只在一行上写标记为i, friend，它将如我所愿显示“嗨，朋友”。但是当我把它分成多行时，它会显示 "H i,friend s" 里面有不必要的空格。

这是我的 css 代码和 html 代码::

.parent {
  font-size: 0;
}
.parent > span {
  font-size: 16px;
  display: inline-block;
}
.parent > span::before {
  content: "H";
}
.parent > span::after {
  content: "s";
}

<p class="parent">
  <span>
    i, friend
  </span>
</p>

我知道不推荐写

<span>
  i, friend
</span>

而不是i, friend。

但如果我坚持（见谅），是否可以如我所愿显示“嗨，朋友们”？

【问题讨论】：

我能看到这个工作的唯一方法是浮动所有左边并将之前和之后放在父级上：jsfiddle.net/n8hxtzos。看起来你是在为自己创造额外的工作，但如果你要固执的话……
您可以使用否定的margin-right（和margin-left 用于::after）来对齐字母。骇人听闻，你仍然会有一个空白（在整个文本的前面而不是在里面），但可能看起来像你想要的（除非第一个或最后一个字母在它们自己的文本行上）。
@Pete 谢谢。您的代码确实有效。你能告诉我为什么 float 可以修剪不必要的空间吗？
@Pete 在这里似乎是一个小问题。如果我在 中添加更多，则只能为第一个 添加“H”，为最后一个添加“s”。无论如何，当我只有一个子元素时它可以正常工作。
@Xenos 感谢您的建议。我在努力寻找更多的可能性，所以我看起来有点固执:)

标签： html css line-breaks pseudo-element spaces

【解决方案1】：

我不知道基于 CSS 的解决方案，但您可以使用一些简单的 JS 删除文本节点（导致空格）：

var pElement = document.querySelector(".parent>span");
for (node of pElement.childNodes)
    if (node.nodeType === 3 )
        node.textContent = node.textContent.trim();

在window.onload 或<body onload=" ... " 内

【讨论】：

感谢您的想法。我试过你的脚本，但它似乎不适合我。
@LoveMind 抱歉，这很奇怪：/。我将你所有的代码都复制到了一个 jsFiddle 中，它对我有用（从逻辑上讲，这种方法总是有效的）。
哦，是我的错。我应该说对不起。在阅读了jsFiddle中的框架代码后，我发现我以错误的方式使用了window.onload。顺便说一句，我用querySelectorAll 修改了您的代码，以便我可以将其应用于具有2 个或更多span 的案例。非常感谢你！

【解决方案2】：

尝试inline-flex 而不是inline-block

.parent {
  font-size: 0;
}
.parent > span {
  font-size: 16px;
  display: inline-flex;
}
.parent > span::before {
  content: "H";
}
.parent > span::after {
  content: "s";
}

<p class="parent">
  <span>
    i, friend
  </span>
</p>

【讨论】：

太棒了！有用。你能告诉我为什么flex可以在这里避免空格吗？
您的代码的问题是 html 中的空格，而 flexbox 将它们删除。
是否需要font-size:0？这会丢弃相对字体单位。
它会从父级中删除空格，但不会从 span jsfiddle.net/Lg0wyt9u/1265
@Xenos 是的。这不是必需的。我用它来避免两个内联块元素之间的空间。这里不需要它。感谢 Nenad Vracar 的代码。