我有一个UTF8文本字符串，我希望根据以下规则显示在网页中的div（或整个<body>）中：
-
所有字符都应该像在支持unicode的文本编辑器中一样按字面意思显示。
-
不应忽略空白。TAB应该缩进一定数量的空格（例如4或8）。LF应导致断线。
-
当文本文件的包含div的宽度发生变化时，文本应该自动换行（就像在普通的
<p>段落中一样，或者就像在启用了换行的文本编辑器中一样）。
很明显，在将文本字符串插入网页之前，我需要对其执行一些预处理步骤（也许我需要将某些字符替换为命名实体&foo;。也许我需要用某个标记包围文本文件，例如<pre>等）。
确切地说，我需要执行哪些预处理步骤才能实现上述目标。如果有多组步骤可以实现上述目的，请用最短/最简单的步骤回答。
（1）和（3）实际上非常简单，如果您将文档作为UTF-8提供，并且您可以很好地支持IE>=8。然后是：
<body style="white-space: pre-wrap">
(Your String here, '<' and '&' encoded to '<' and '&' respectively)
</body>
空白CSS属性是这里的关键。
对于（2），您要么需要预处理步骤（la s/t/ /g），要么等待所有浏览器都支持选项卡大小。
在不进行任何预处理的情况下，一种非常简单的方法是将其封装在<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的答案
http://jsbin.com/oxifek/edit#html，实时