Question

我有一个UTF8文本字符串，我希望根据以下规则在网页中的div（或整个<body>）中显示：

所有字符都应该像在unicode识别文本编辑器中那样按字面显示。
不应忽视空白。 TAB应缩进到某些空格（例如4或8）。 LF应该导致换行。
文本应该自动换行（就像普通的<p>段落一样，或者与打开自动换行的文本编辑器一样）作为文本包含div的宽度文件更改。

显然我需要在将文本字符串插入网页之前对文本字符串执行一些预处理步骤（也许我需要用命名实体&foo;替换某些字符。也许我需要用文本文件环绕文本文件某些标记，例如<pre>等）。

确切地说，为实现上述目标，我需要执行哪些预处理步骤。如果有多组步骤可以实现上述目标，请以最短/最简单的方式回答。

Answer 1

（1）和（3）实际上非常简单，如果您将文档作为UTF-8提供，并且您可以支持IE＆gt; = 8.那就是：

<body style="white-space: pre-wrap">
  (Your String here, '<' and '&' encoded to '&lt;' and '&amp;' respectively)
</body>

此处white-space CSS属性是关键。

对于（2），您需要预处理步骤（la s/\t/ /g）或等到所有浏览器都支持tab-size。

Answer 2

在没有任何预处理的情况下执行此操作的超级简单方法是将其包装在<textarea>中。

HTML：

<textarea readonly class="code">
 <!DOCTYPE html>
   <html>
     <head>
       <meta charset=utf-8 />
       <title>My Code</title>
     </head>
     <body>
       My Content
     </body>
   </html>
</textarea>

CSS：

 .code {
    border:1px solid;
    width:500px;
    height:200px;
    overflow:auto;
    outline:none;
    resize:none;
  }

然而，由于textarea用于编辑，这有点不具有语义性。但是，如果您不在乎，这是一个很好的解决方案 - 否则，我建议Boldewyn's回答

http://jsbin.com/oxifek/edit#html,live

像文本编辑器一样在HTML中显示原始文本

2 个答案:

HTML：

CSS：