第二：通过直接str = str.replace(/↵/g,"< br />") 是替换不了的，
str = str .replace(/(\r\n|\n|\r)/gm , “
”); 可以直接替换，下图为展示成功
项目中遇到一个需求，用户输入内容需要保留空白符和换行符来展示。
white-space: pre-wrap
想必大家都想到了
white-space: pre-wrap
用户输入的：
image.png
image.png
image.png
实际展示的：
image.png
会发现第一行，没有空格咋还首行缩进了？此时设置text-indent:0 也没用
网上一查，试试<pre>标签，保留原格式
image.png
还是不行，搜到了一个不太起眼的文章：如何让<pre></pre>里面的内容首行不缩进?-CSDN论坛
意思是标签和内容间不能有回车，尝试修改了下
image.png
image.png
心中一万个xx马路过
那再试回<p>标签呢
pre{white-space: pre-wrap; /* css-3 /white-space: -...
pre{ white-space:pre-wrap; white-space:-moz-pre-wrap; whi...
第二：通过直接str = str.replace(/↵/g,"< br />") 是替换不了的，str = str...
white-space: normal | pre | nowrap | pre-wrap | pre-line ...
pre { white-space: pre-wrap; word-wrap: break-word; }
p, li { white-space: pre-wrap; } IPC即Inter-Process Commun...
自动换行：pre {word-wrap: break-word;white-space: pre-wrap;}去除...
pre标签的强制换行： pre { white-space: pre-wrap; word-wrap: break...
[TOC] pre标签 自动折行：white-space: pre-wrap; 代码主题：prism.js导入pr...
方案1: 使用字符代替空格例如： 方案2: 设置style样式 white-space: pre-wrap,浏览器...
本文标题：2021-07-26 white-space: pre-wrap
本文链接：https://www.haomeiwen.com/subject/lqhgmltx.html
网友评论