<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 效果如下:
因此,更推荐使用第二种方法。