textarea 输入数据换行回显如何保持格式

                   textarea 输入数据换行回显如何保持格式

1、使用<pre>标签，该标签能按输入的格式原样输出。

2、采用该标签后，在移动端等比较小的屏幕上，会发现由于按原格式输出，如果用户连续输入很长，会出现超出屏幕框的的情况，需要加入以下样式：

pre {

     white-space: pre-wrap; /*css-3*/

      white-space: -moz-pre-wrap; /*Mozilla,since1999*/

      white-space: -pre-wrap; /*Opera4-6*/

      white-space: -o-pre-wrap; /*Opera7*/

      word-wrap: break-word; /*InternetExplorer5.5+*/

}

注：vue项目也采用上述方法，react 项目中应该采用下面方法：

<pre>

{`

床前明月光

疑是地上霜

举头望明月

低头思故乡

`}

</pre>

里面必须是模板字符串的形式，光pre没效果

注：

1、如果发现以上方法没效果，检查以下是否后端做了转义，把 \n 给转没了

2、pre回显后，如果发现前面莫名其妙的多次一些空格，那是因为<pre>{{变量}}</pre>必须这样写，不能换行

 

小程序保持文本格式可以试一下这个：

https://www.cnblogs.com/kunmomo/p/12357928.html