一、问题概述

用户需要轻而易举地查看和复制预格式化文本。

二、截图示例

三、参考用途

• 用于想显示格式化文本，这些文本易于复制，并且不会丢失格式信息。
• 用于演示代码时使用。
• 用于展示的信息允许用户复制（后续还可以将信息粘贴到其它系统中）。

四、解决方案

创建一个方框，方框内有专门的字体颜色、字体样式和背景色，用于与页面其它内容相互区分。

保留文本框内的缩进和通用格式，使它看起来像终端窗口或者文本编辑器。使用 Space Mono 字体：该字体的字体宽度相同（字形宽度相同）。

不用换行及空白行，在 html 源文件中插入文本，需要使用特别的标签包围文本，以便保留文本原来的格式。一种方法是使用

 标签包围要保留原始格式的文本，另一种方法是将文档放在一个 <span class="pln"> </span><span class="pun">中。</</span><span class="pln">p</span><span class="pun">></span>
<span class="str"><p></span><span class="pun"><</span><span class="pln">a name</span><span class="pun">=</span><span class="str">"LAQSa"</span><span class="pun">><</span><span class="str">/a></</span><span class="pln">p</span><span class="pun">></span>
<span class="pun"><</span><span class="pln">h1 id</span><span class="pun">=</span><span class="str">"3uorv7"</span><span class="pun">><</span><span class="pln">a name</span><span class="pun">=</span><span class="str">"3uorv7"</span><span class="pln"> </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"reference-link"</span><span class="pun">><</span><span class="str">/a><span class="header-link octicon octicon-link"></</span><span class="pln">span</span><span class="pun">>五、相关说明<</span><span class="str">/h1><p>如果将 ASCII 编码的文本复制到 html 文件中，由于 html 文件中有专门的标签代表换行（<br>），因此不管如何排版，用户浏览器都会格式化该文本，并将全部内容单行显示。</</span><span class="pln">p</span><span class="pun">></span>
<span class="str"><p></span><span class="pun"><</span><span class="pln">a name</span><span class="pun">=</span><span class="str">"k4Ctt"</span><span class="pun">><</span><span class="str">/a></</span><span class="pln">p</span><span class="pun">></span>
<span class="pun"><</span><span class="pln">h1 id</span><span class="pun">=</span><span class="str">"80ssa2"</span><span class="pun">><</span><span class="pln">a name</span><span class="pun">=</span><span class="str">"80ssa2"</span><span class="pln"> </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"reference-link"</span><span class="pun">><</span><span class="str">/a><span class="header-link octicon octicon-link"></</span><span class="pln">span</span><span class="pun">>附录<</span><span class="str">/h1><p><a rel="nofollow" href="https:/</span><span class="pun">/</span><span class="pln">ui</span><span class="pun">-</span><span class="pln">patterns</span><span class="pun">.</span><span class="pln">com</span><span class="pun">/</span><span class="pln">patterns</span><span class="pun">/</span><span class="typ">CopyBox</span><span class="str">">查看原文</a></p></span>