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

html的textarea内容显示的时刻怎么换行?输入的时刻换了行,然则读取出来的时刻是连在一起的,要怎么才可以显示换行? 方式一:行使pre 1、在textarea输出的div中添加如下css样式: .content {...

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 标签

行使正则,写法如下:

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> 标签



思源资源网:分类流动

1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各种产物的最新流动,优惠券领取点击进入

3.广告同盟: 整理了现在主流的广告同盟平台,若是你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1421

  • 发表于 2021-04-03 13:28
  • 阅读 ( 301 )
  • 分类:互联网

0 条评论

请先 登录 后评论
695i
695i

719 篇文章

你可能感兴趣的文章

相关问题