html 不识别斜杆 n 解决方法

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

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

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

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

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

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

     第三种： 需要换行的标签上设置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