【前端】html不渲染换行等的问题 pre

方法一string.replace(/\r\n/g,/br)方法二 推荐 使用pre 元素div stylewhite-space: pre;这是一个 带有换行的文本。/div或者pre这是一个 带有换行的文本。/prestyle /* 设置 white-space 样式 */ pre { white-space: pre-wrap; } /style div pre{{sqlHtml}}/pre /divpre 元素pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。pre 标签的一个常见应用就是用来表示计算机的源代码。由上述代码可知在正常的元素中无论使用多少个空格或换行符都只会折叠成一个空格而在pre中会保留空格和换行符显示的文本格式和html文件中的文本格式是一致的。[扩展]空白折叠在源代码中的连续空白字符空格、换行、制表在页面显示时会被折叠成为一个空格。而在pre元素中的内容不会出现空白折叠在pre元素中的内容会按照源代码格式显示到页面上。显示代码时通常在外面套一个code元素code表示代码区域。white-space解析值描述normal默认空白会被浏览器忽略。pre空白会被浏览器保留其行为类似HTML中的pre标签。nowrap文本不会换行文本会在同一行上继续知道遇到br标签为止。pre-wrap保留空白符序列但是正常的进行换行。pre-line合并空白符序列但是保留换行符。inherit规定应该从父元素继承white-space属性的值。