html不识别斜杆n 解决方法

789 阅读1分钟

在 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