在没有 <pre> 标签的情况下实现 <pre> 结果

问题描述

是否有可能实现这样的结果，其中线条很好地相互接触：

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 样式。 现在在 css 中添加 white-space: pre; 时有很多空间：

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>

如果有可能，那么它会为我节省很多复杂性。

解决方法

只需删除 '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;。

,

您可以通过将负 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>

,

您可以重置 CSS。

* {
margin: 0;
padding: 0;
}