javascript - 如何增加单词周围的边距，除了一行的边缘

Question

我正在使用 <code>带有额外的 CSS。我想增加左右边距

code {
  margin-left: 10px;
  margin-right: 10px;
}

This word is a <code>reserved</code> word.

这通常工作得很好，但如果这个词在一行的开头，它就会在左边有我不想要的笨拙的额外边距。例子:

code {
  margin-left: 10px;
  margin-right: 10px;
}

This word is a <br><code>reserved</code> word.

明确地说，<br>只是上面的例子...我不知道什么时候 <code>位于行的开头，这取决于它是如何折叠的(对于给定的窗口宽度)。

CSS word-spacing看起来它可能是这里的修复，但它似乎只是单词间的间距，所以它不起作用。

有没有办法使用 CSS 来完成此操作？

Answer 1

我只能找到 2 3 种方法来解决这个问题，除非您想要一个脚本来遍历文本并计算行数，也就是将其余文本也换行，

span {
  margin-right: 10px;
}
code {
  margin-right: 10px;
}

<span>This word is a </span><code>reserved</code><span> word.
This word is a <br></span><code>reserved</code><span> word.
This word is a </span><code>reserved</code><span> word.</span>

或保留字前的每个字。

span {
  margin-right: 10px;
}
code {
  margin-right: 10px;
}

This word is <span> a </span><code>reserved</code> word.
This word is <span> a </span><br><code>reserved</code> word.
This word is <span> a </span><code>reserved</code> word.

如果前面单词的元素经常不同(如 span、b、i)，这里有一个 CSS 规则变体来覆盖那个。

code {
  margin-right: 10px;
}
*:not(br) + code {
  margin-left: 10px;
}

This word is <span> a </span><code>reserved</code> word.
This word is <i> a </i><br><code>reserved</code> word.
This word is <b> a </b><code>reserved</code> word.

---

这是另一种方式，尽管它是一个小缺陷，它不会正确地换行，因为保留字需要在标记中与前面最接近的字之间没有空格。不过，它还有另一个好处，即标记最少。

code {
  margin: 0 10px;
}
code:before,
code:after {
  font-size: 0px;
  content: ' ';
}

This word is a<code>reserved</code> word.
This word is a<code>reserved</code> word.
This word is a<code>reserved</code> word.
This word is a<code>reserved</code> word.
This word is a<code>reserved</code> word.
This word is a<code>reserved</code> word.