为什么将等宽字体设置为80em占用少于80列文本？

Question

我正在尝试使网页上的某些文本看起来像Gopherspace中的页面。换句话说，等宽字体最多包含80列。我发现如果字体是等宽字体，并且将包含元素的宽度设置为80em，那将限制它到理想的80列，因为每个字符在等宽字体中的宽度都应相同。

我添加的颜色只是为了更容易分辨换行的位置。

如果此方法在某些浏览器/计算机上不能使用，而在其他浏览器/计算机上不能使用，这就是我在计算机上看到的内容，该计算机在Mac OS 10.14.3上运行Firefox 65.0.1。

为什么这个div几乎是80列文字的两倍，我该如何解决？

.plaintext {
  background-color: black;
  font-family: monospace;
  width: 80em;
  font-size: 10px;
  border: 2px solid red;
  overflow-wrap: break-word;
}

.r { color: red; }
.o { color: orange; }
.y { color: yellow; }
.g { color: green; }
.b { color: blue; }
.i { color: indigo; }
.v { color: violet; }

<div class="plaintext">
  <span class="r">0123456789</span><span class="o">0123456789</span><span class="y">0123456789</span><span class="g">0123456789</span><span class="b">0123456789</span><span class="i">0123456789</span><span class="v">0123456789</span><span class="r">0123456789</span>
</div>

Answer 1

元素的字体大小（在em中度量）是字体的高度，而不是宽度。
（最初，“ em”一词指的是M的宽度，但很少有字体的M不再精确地等于1em的宽度。）

解决方案是使用ch作为宽度单位。在等宽字体中，1ch是字符的宽度。在可变宽度字体中，1ch是0（零）字符的宽度。
请参见official definition at the W3C或更易读的MDN version。

.plaintext {
  background-color: black;
  font-family: monospace;
  width: 80ch;      /* changed */
  font-size: 10px;
  border: 2px solid red;
  overflow-wrap: break-word;
}

.r { color: red; }
.o { color: orange; }
.y { color: yellow; }
.g { color: green; }
.b { color: blue; }
.i { color: indigo; }
.v { color: violet; }

<div class="plaintext">
  <span class="r">0123456789</span><span class="o">0123456789</span><span class="y">0123456789</span><span class="g">0123456789</span><span class="b">0123456789</span><span class="i">0123456789</span><span class="v">0123456789</span><span class="r">0123456789</span>
</div>