html不识别斜杆n 解决方法

在 html 中的一些特殊场景中需要某一段文字遇到斜杠 n 就行换行，但是往往加了后没有效果。 八那是因为html标签不识别 斜杠n,认为斜杠 n ,只是一个普通的文本。

 解决这种问题通常有以下几种方案 

        第一种:  VUE 的 v-html 来解决，需要把  \n 换成 </br> 才能识别到;或使用js原生写法 innerHTML = '--------'

<div v-html="body"></div>

        第二种： 需要换行的标签上套一个层<pre></pre>

<pre>
  <div>
    Hello /n Word
  <div>
</pre>

     第三种： 需要换行的标签上设置CSS属性

// white-space 为：pre-line， pre-line 表示 合并空白符序列，但是保留换行符
white-space: pre-line;

        white-space 其他的属性

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的<pre>标签
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到</br>标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

CSS1 对 各种 white-space 值的行为：

	换行符	空格和制表符	文字换行	行尾空格
normal	合并	合并	换行	删除
nowrap	合并	合并	不换行	删除
pre	保留	保留	不换行	保留
pre-wrap	保留	保留	换行	挂起
pre-line	保留	合并	换行	删除
break-spaces	保留	保留	换行	换行

        

更多请阅读 ：  white-space