这是否有可能让我难以理解，更不用说如何实现了。
我希望显示来自 AS/400 的基于文本的“屏幕截图”。这些屏幕是 80x24 基于字符的屏幕，具有颜色和粗体/下划线功能。
我可以将整个屏幕复制为文本并将其放在 PRE 标记之间，它看起来很棒，只是它缺少用于指示输入字段在屏幕上的位置的下划线。
如果所述输入字段为空，则可以通过用实际的下划线字符替换空格来模拟它们 - 这有点麻烦 - 但这些字段通常会显示我想在我的表示中维护的默认值。
因此我需要保留空白的等宽文本和（可能是 ned）有选择地应用于特定字符的下划线样式（同时保持空白！）
我只是无法理解可以使用哪种 HTML/CSS 组合来相对轻松地实现这一目标。我认为，主要问题在于预格式化文本中的样式显然存在悖论。
任何关于方法、技术或基本不可能的想法将不胜感激。
【问题讨论】：
您可以在<pre> element 中使用标记。根据规范，那里只允许使用某些类型的标记元素，尽管浏览器更宽松；但出于您的目的，允许的文本级标记就足够了。
您可以将<u> 用于下划线，<b> 用于粗体，<font color=...> 用于着色，或者您可以将<span class=...> 用于所有目的，具有不同的class 属性和适当的CSS 设置。
这意味着 HTML 源代码 看起来不太好，因为您从预先格式化的文本开始并添加了标记。例如，如果您有
foo bar: umpf
foo bar: zap
如果你想让第二个“条”加下划线，你可以把它改成
foo bar: umpf
foo <b>bar</b>: zap
然后在 HTML 中看起来并不一致。
但是显示是可以的，只要你在添加标签或编写添加它们的程序代码时小心（如果它们可以通过算法添加的话）。
下划线和着色不会改变字符的前进宽度。粗体可以做到这一点，而且经常这样做，但不是在等宽字体中。我在快速测试中发现的唯一例外是 Everson Mono，但你可能没有使用它。可能还有其他（很少使用）等宽字体存在相同的问题：它们缺少粗体字体，迫使程序要么忽略粗体尝试，要么应用算法粗体，这通常会略微增加宽度。
【讨论】：
<pre> - 您只需使用 CSS 属性 white-space:pre 对其进行样式设置。跨度>
您可以简单地使用等宽字体而不是使用<pre> 标记。示例：
<div style="font: normal 10pt 'Courier New'; width: 300px; height: 300px; overflow: scroll;">
Test Content
</div>
调整 width 和 height 的值以完全适合 80x24 并且您拥有自己的控制台窗口。在里面你可以根据自己的喜好格式化。
【讨论】：