Html 样式化、预格式化、单间距文本-可能吗？

我很难弄清楚这是否可能，更不用说如何实现了

我希望显示AS/400中基于文本的“屏幕截图”。这些屏幕是基于80x24字符的屏幕，具有颜色和粗体/下划线功能

我可以将整个屏幕复制为文本，并将其放在预标记之间，它看起来很棒，只是缺少了用于指示输入字段在屏幕上的位置的下划线

如果所述输入字段为空，则可以通过使用实际下划线字符替换空格来模拟它们-这有点麻烦-但字段通常显示我希望在表示中保持的默认值

因此，我要求使用保留空格的单间距文本，并且（可能是ned）下划线样式选择性地应用于特定字符（同时保留空格！）

我只是不知道什么样的HTML/CSS组合可以相对容易地实现这一点。我认为，问题主要在于预先格式化的文本中明显的风格悖论

---

如果您对这种方法、技术或基本不可能性有任何想法，我们将不胜感激。

您可以在

如果你想在第二个“条”上加下划线，你可以把它改为

<div style="font: normal 10pt 'Courier New'; width: 300px; height: 300px; overflow: scroll;">
    Test Content
</div>

foo-bar:umpf
福吧：赞

然后事情在HTML中看起来就不一致了

但是，只要您在添加标记或编写添加标记的程序代码时小心（如果可以通过算法添加标记），显示就会正常

下划线和着色不会改变字符的前进宽度。加粗可以做到这一点，而且经常做到，但在单空格字体中不行。我在快速测试中发现的唯一例外是Everson Mono，但您可能没有使用它。可能还有其他（很少使用的）单空格字体也有同样的问题：它们缺少粗体字体，迫使程序忽略粗体尝试或应用算法粗体，这通常会略微增加宽度。
您可以在

如果你想在第二个“条”上加下划线，你可以把它改为

<div style="font: normal 10pt 'Courier New'; width: 300px; height: 300px; overflow: scroll;">
    Test Content
</div>

foo-bar:umpf
福吧：赞

然后事情在HTML中看起来就不一致了

但是，只要您在添加标记或编写添加标记的程序代码时小心（如果可以通过算法添加标记），显示就会正常

下划线和着色不会改变字符的前进宽度。加粗可以做到这一点，而且经常做到，但在单空格字体中不行。我在快速测试中发现的唯一例外是Everson Mono，但您可能没有使用它。可能还有其他（很少使用的）单空格字体也有同样的问题：它们缺少粗体字体，迫使程序要么忽略粗体尝试，要么应用算法粗体，这通常会略微增加宽度。
您可以简单地使用单空格字体，而不是使用
标记。例如：


测试内容

调整
width
和
height
的值，使其正好适合80x24，这样您就有了自己的控制台窗口。在内部，您可以根据自己的喜好进行格式化。
您可以简单地使用单间距字体，而不是使用
标记。例如：


测试内容

调整
width
和
height
的值，使其正好适合80x24，这样您就有了自己的控制台窗口。在内部，您可以根据自己的喜好设置格式。
+1您可能需要添加一点，即您可以使用任何元素而不是
——您只需使用CSS属性
空白：pre
。很抱歉，这么长时间没有回来。这项工作被搁置了一段时间。多亏了这些答案，我现在已经原型化了HTML。下一步是找出如何为它创建一个有效且不丑陋的wiki语法。+1并且你可能想添加一个，你可以使用任何元素而不是
-你只需要使用CSS属性
空白：pre
。很抱歉这么长时间没有回来。这项工作被搁置了一段时间。多亏了这些答案，我现在已经原型化了HTML。下一步是弄清楚如何为它创建一个有效且不那么难看的wiki语法。
<div style="font: normal 10pt 'Courier New'; width: 300px; height: 300px; overflow: scroll;">
    Test Content
</div>