iPhone 上未正确显示预格式化文本
Posted
技术标签:
【中文标题】iPhone 上未正确显示预格式化文本【英文标题】：pre-formatted text not showing up properly on iPhone 【发布时间】：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 继续托管图像。 无赖。作为新用户，我不能在我的问题中添加图片。 【参考方案1】：css 单元ch 实际上是0 的宽度（零）。因此，为了让您的代码正常工作，您必须确保父元素使用的是等宽字体并且它是网络安全的，这样您的手机才能使用该等宽字体。
在您的情况下，div 和 li 使用 ch 单位，因此 div 和 li 需要使用等宽字体，因为它们不会从子 pre 标记继承。您还需要在 pre 元素及其父元素之间设置匹配的字体大小。
【讨论】：
经过数小时将我的头撞在墙上并感觉自己是世界上最愚蠢的人之后，似乎 David Kaneda 对这个问题的回答：***.com/questions/3226001/… 适用于我的情况（结合他的建议修复了立即出现问题）。 啊，太棒了！以上是关于iPhone 上未正确显示预格式化文本的主要内容，如果未能解决你的问题，请参考以下文章