在没有 <pre> 标签的情况下取得 <pre> 结果

Question

是否有可能实现这样的结果，线条彼此很好地接触：

body {
  margin: 0;
  font-family: 'Courier New', monospace;
}

div pre {
  margin: 0;
}

<div class="background_line"><pre>||||||||||||||||||||||||||||||||||</pre></div>
<div class="background_line"><pre>||||||||||||||||||||||||||||||||||</pre></div>
<div class="background_line"><pre>||||||||||||||||||||||||||||||||||</pre></div>
<div class="background_line"><pre>||||||||||||||||||||||||||||||||||</pre></div>

没有添加 <pre> 元素，所以只有 css 样式。现在 space 在 css 中添加 white-space: pre; 时有太多 space:

body {
  margin: 0;
  font-family: 'Courier New', monospace;
}

div {
  margin: 0;
  white-space: pre;
}

<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>



<div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div>

如果可能的话，我会省去很多复杂性。

Answer 1

你可以通过使用负 letter-spacing 结合 margin-top

来达到效果

body {
  margin: 0;
  font-family: 'Courier New', monospace;
}

div {
  margin: 0;
  white-space: pre;
}

.background_line {
  letter-spacing: -2px;
  margin-top: -4px;
}
.background_line:first-child {
  margin-top: 0;
}

<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>



<div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div>

Answer 2

只需删除 'Courier New' 看起来就可以满足您的需求：

body {
  margin: 0;
  font-family: monospace;
}

div {
  margin: 0;
  white-space: pre;
}

<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>
<div class="background_line">||||||||||||||||||||||||||||||||||</div>



<div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div><div class="background_line">||||||||||||||||||||||||||||||||||</div>

带有 <pre> 的原始版本的用户代理样式表 font-family: monospace; 优先于您的 font-family: 'Courier New', monospace;。

Answer 3

您可以重置 CSS。

* {
margin: 0;
padding: 0;
}

在没有 <pre> 标签的情况下取得 <pre> 结果

Achieve <pre> result without <pre> tag

css

pre