textarea换行_在textarea中如何换行的实现总汇

html的textarea内容显示的时候怎么换行？输入的时候换了行，但是读取出来的时候是连在一起的，要怎么才可以显示换行？

 

方式一：利用pre

1、在textarea输出的div中添加如下css样式：

.content {
   white-space: pre;
}

　　

2、利用<pre>标签来输出textarea的内容：

<pre>这是textarea中的内容....</pre>

　　

该方式的优缺点：

优点: 

不需要区别浏览器, 正则校验替换, 保存输入的符号  

缺点: 

但是超出长度部分不会折行显示, 在同行显示, 需要添加 white-space的样式

white-space: pre-wrap || pre-line;

　　

pre 标签样式, 可能会改变预期样式 字体大小, 颜色, 字体类型等, 需要全局设置初始值

摄图网https://www.wode007.com/sites/73204.html VJ师网https://www.wode007.com/sites/73287.html

方式二：将 \n\r 替换成 br 标签

利用正则，写法如下：

input.replace(/\r/ig, '').replace(/\n/ig, '<br/>')

　　

注意: 需要 dangerouslySetInnerhtml: { \_\_html: text} 解析。

该方式的优缺点：  

优点:  

可设置自动换行，可不修改样式, 如果统一处理包裹标签有可能会影响 

缺点:  

dangerouslySetInnerhtml 有 XSS 漏洞, 建议使用 html escape 处理

import _ from 'lodash';
 
const createhtml = encodedhtml => ({
    __html: encoded(createhtml)
});
 
function encoded(html) {
    return _.escape(html).replace(/\r/g, '').replace(/\n/g, '<br/>')
}
 
export function newlineReplaceBr(input) {
    if (input) {
        return h.span({
            dangerouslySetInnerHTML: createHtml(input)
        })
    }
    else {
        return ''
    }
}

　　

 

方式三：直接在渲染标签元素上添加 white-space: pre-wrap | pre-line | pre  

所有浏览器都支持 white-space 属性。white-space 属性设置如何处理元素内的空白, 换行

pre-wrap 保留空白符序列，但是正常地进行换行
pre-line 合并空白符序列，但是保留换行符
pre: 空白会被浏览器保留, 在遇到换行符或者<br>元素时才会换行, 类似 HTML 中的 <pre> 标签