（翻译）复制框（Copy Box）

问题概述

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

示例

用途

• 用于想显示格式化文本，这些文本易于复制，并且不会丢失格式信息；
• 用于显示Space Mono字体[1]的 示例代码；[2]
• 用于展示的信息允许用户复制（后续还可以将信息粘贴到其它系统中）。

解决方案

  创建一个方框，方框内有专门的字体颜色、字体样式和背景色，用于与页面其它内容相互区分。
  保留文本框内的缩进和通用格式，使它看起来像终端窗口或者文本编辑器。使用Space Mono字体：该字体的字体宽度相同（字形宽度相同）。
  不用换行及空白行，在html源文件中插入文本，需要使用特别的标签包围文本[3]，以便保留文本原来的格式。一种方法是使用< pre >标签包围要保留原始格式的文本，另一种方法是将文档放在一个< textarea >中。

说明

  如果将ASCII编码的文本复制到html文件中，由于html文件中有专门的标签代表换行（< br >），因此不管如何排版，用户浏览器都会格式化该文本，并将全部内容单行显示。[4]

原文地址：http://ui-patterns.com/patterns/CopyBox
[1]Space Mono字体：https://www.fontke.com/family/1159281/， https://www.cnblogs.com/i0air/archive/2012/11/29/ 2794003.html
[2]原文：Use when need to display mono space demo code.
[3]原文：As inserting text in raw HTML renders without line breaks and strips repeating spaces,
[4]原文：If you just paste ascii formatted text into a HTML file, the user’s browser will format the text and display it all in one line and regardless of how the code looks like in the HTML file as special tags are used in HTML to define line breaks (< br >).