iPhone 上未正确显示预格式化文本答案

【问题标题】：pre-formatted text not showing up properly on iPhoneiPhone 上未正确显示预格式化文本
【发布时间】：2020-06-15 07:55:42
【问题描述】：

我在获取预先格式化的文本以在我的 iPhone 上正确呈现时遇到问题。

如果我只做一个预先格式化的项目，一切看起来都不错（代码就在下面）。

<!DOCTYPE html>
<html>
<head>
<title>Problem with <pre></title>
</head>

<style>
pre {
  background-color: rgb(30, 30, 30);
  color: rgb(200,200,200);
}
</style>

<body>
<!-- exactly 80 characters -->
<div style="width:80ch"><pre>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</pre></div>
</body>
</html>

From my iPhone

但是当我尝试在有序列表中做同样的事情时（代码就在下面）。

<!DOCTYPE html>
<html>
<head>
<title>Problem with <pre></title>
</head>

<style>
pre {
  background-color: rgb(30, 30, 30);
  color: rgb(200,200,200);
}
</style>

<body>
<div style="width:80ch"><pre>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</pre></div>
<ol>
  <li> <div style="width:80ch"><pre>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</pre></div>
</ol>
</div>
</body>
</html>

从我的电脑加载这个时一切看起来都很好，但在我的 iPhone 上，不仅缩进的那个搞砸了，现在原来的那个看起来也错了。几乎就像我添加列表时字体大小发生了变化。

from my phone

两个版本的链接：

first one

second one

我怎样才能在我的手机上正常工作？我需要宽度为 80 个字符宽，以便显示标准终端输出。

【问题讨论】：

尝试将 div 和 li 设置为 inline-block 并将 x-overflow 属性设置为滚动。我不认为预格式化的文本不会换行。
这提供了一种解决方法（谢谢！），但问题仍未解决。请注意，第一个确实在 iPhone 上正确显示。
我看到我至少收到了一张反对票，但没有关于如何改进问题的建议。我想请任何有反馈的人告诉我如何提出更好的问题。
反对票的不是我，而是我观察到的：SO 更喜欢内联图像和代码。我想这样它会在问题的整个生命周期内持续存在，而不是指望 imgur 继续托管图像。
无赖。作为新用户，我不能在我的问题中添加图片。

标签： html css

【解决方案1】：

css 单元ch 实际上是0 的宽度（零）。因此，为了让您的代码正常工作，您必须确保父元素使用的是等宽字体并且它是网络安全的，这样您的手机才能使用该等宽字体。

在您的情况下，div 和 li 使用 ch 单位，因此 div 和 li 需要使用等宽字体，因为它们不会从子 pre 标记继承。您还需要在 pre 元素及其父元素之间设置匹配的字体大小。

【讨论】：

经过数小时将我的头撞在墙上并感觉自己是世界上最愚蠢的人之后，似乎 David Kaneda 对这个问题的回答：stackoverflow.com/questions/3226001/… 适用于我的情况（结合他的建议修复了立即出现问题）。
啊，太棒了！