如何在HTML中原格式输出文本

方案一：使用 HTML pre tag<div class="content">

<pre>

{{ text_data }}

</pre>

</div>

缺点是默认为等宽字体。

方案二：使用 linebreaks filter

<div class="content">

{{ text_data|linebreaks }}

</div>

<!-- 或 -->

<div class="content">

{{ text_data|linebreaksbr }}

</div>

在没有使用编辑器而是使用了文本域 <textarea>的情况下，用户所输入的内容呈现的效果并不理想，比如：原本的换行没有保留，全部成了单行显示。

要让在 <textarea>中输入的内容原格式输出有一下两种办法：

使用 <pre>标签是我最开始采用的办法，但是这种方法也有一定的缺陷,比如说我们在使用的编辑器的时候，换行、Tab、空格都会影响到输出结果。如图：

并且， <pre>标签本身自带得有一些样式，比如字体等。如果你的页面有引入bootstrap等css框架，那么受样式影响就更多了，你得再写去覆盖。

因此，这种方法并不推荐。

我们先来看一下 white-space 的定义和属性：

其属性有：

也就是说，我们可以使用 white-space:pre-warp 或 white-space:pre-line 达到我们想要的效果。

两者的区别是：

如图：

white-space:pre-warp 效果如下：

white-space:pre-line 效果如下：

因此，更推荐使用第二种方法。

字符实体

在html中，有些字符拥有特殊含义，比如小于号'<'定义为一个html标签的开始。假如我们想要浏览器显示这些字符的话，必须在html代码中插入字符实体。 一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（） 想要在html文档中显示一个小于号，我们必须这样写：<或者< 使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。 注意：实体名是大小写敏感的。

---