在没有<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样式。当white-space: pre;被添加到css中时，现在有很大的空间：

​

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

删除'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 2

您可以通过结合使用负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 3

您可以重置CSS。

* {
margin: 0;
padding: 0;
}