3

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

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

如果这适用于某些浏览器/计算机而不适用于其他浏览器/计算机，这就是我在我的计算机上看到的，它在 Mac OS 10.14.3 上运行 Firefox 65.0.1。

超过 80 列

为什么这个 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>

4

1 回答 1

1

元素的字体大小（以 为单位em）是字体的高度，而不是宽度。
（最初，“em”这个词是指 M 的宽度，但没有多少字体有 M 正好是 1em 的宽度。）

解决方案是使用ch宽度作为单位。在等宽字体中，1ch是字符的宽度。在可变宽度字体中，1ch是 0（零）字符的宽度。
请参阅W3C 的官方定义或更具可读性的MDN 版本。

.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>

于 2019-03-14T07:28:18.353 回答