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 标签样式, 可能会改变预期样式字体⼤⼩, 颜⾊, 字体类型等, 需要全局设置初始值
⽅式⼆：将 \n\r 替换成 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/>')
}textarea中cols表示
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> 标签

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。