Question

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

同样，如果我只在一行上将标记写为<span class="inline">i, friend</span>，它会按照我的意愿显示“嗨，朋友”。但是当我将它分成多行时，它会显示“H i，friend s”，其中包含不必要的空格。

这是我的css代码＆amp; 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>

而不是<span>i, friend</span>。

但如果我坚持（原谅我），是否有可能按照我的意愿显示“嗨，朋友”？

Answer 1

尝试使用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>

Answer 2

我不知道基于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=" ... "

内

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

2 个答案: