ajax获取后台数据渲染(整片文章不分段落)解决方案,要使用htmL方式输出

Posted 2020-10-31 大熊

方案一：使用 html pre tag<div class="content">
<pre>
  {{ text_data }}
</pre>
</div>

缺点是默认为等宽字体。
解决方案:

/* pre标签会原样保留HTML内容的格式，可是如果宽度过大会把页面撑坏 */
/* 让pre标签自动换行 */
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

方案二：使用 linebreaks filter
<div class="content">
  {{ text_data|linebreaks }}
</div>
<!-- 或 -->
<div class="content">
  {{ text_data|linebreaksbr }}
</div>