css 后台返回的文本域内容有换行符，前端进行处理使页面可以换行

已于 2022-04-18 15:16:27 修改
阅读量1.2k 收藏
点赞数
分类专栏： css 文章标签： css
于 2022-04-18 15:09:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010613970/article/details/124250071
版权

文本域换行实现如下，其实这个问题遇到好多次了，好几次在网上找到解决方法，但是一直没有记录
今天就记录一下

这种情况一般在后台通过textarea标签输入内容后，且内容有换行，然后通过后台接口返回数据进行处理，前端无论用{{}}这种方式还是v-html接收，\r\n都没办法自动换行

在这里插入图片描述

直接上代码：

<div style="white-space: pre-line;">${response.errors}</div>
【前端开发基础】CSS基础知识以及CSS3
qq_43293778的博客
06-03 6935
三、CSS层叠样式表 一 目标 能够说出什么是CSS 能够使用CSS基础选择器 能够设置字体样式 能够设置文本样式 能够说出CSS的三种引入方式 能够使用Chrome调试工具调试样式 1、CSS简介 CSS的主要使用场景就是美化网页的，布局页面的 1.1 HTML的局限性 说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义，比如< h1>表名这是一个大标题，< p>表明这是一个段落，< img>表明这儿有一个图片，< a>表示此处有链接。 1.2
html+css学习笔记
hutongkoudemihu的博客
06-19 1054
HTML+CSS+Javascript=网页HTML:Hyper Text Markup language 超文本标记语言；定义网页中有什么。CSS:Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子。MarkDown:MD 文档格式标准 [toc]可以加目录w3c 万维网联盟，非盈利性的组织：w3c.org 为互联网提供各种标准XML 可扩展的标记语言：extension markup lanuage,用于定义文档结构的。html HTML是W3C组织定义的语言标准。HT
文本域自动换行
07-15
当数字或者英文中带有汉字时，会从汉字处换行，而纯汉字却可以自动换行。这个问题如何解决?先来认识一下两位主角word-wrap和word-break word-wrap用来控制换行
前端如何根据后端返回的文本数据进行换行显示？
热门推荐
鸭绒的博客
01-24 2万+
假设后端传回一个文本数据： 文本内容就是上面圈着的一部分，内容中包含换行符（↵）.对于这类型的数据，在前端页面是需要进行稍微处理才能正常显示。如果没有经过处理，那么内容是不会在有换行符的位置进行换行显示的： 而正常的显示应该是： 下面两种方法可以实现这种效果： 方法一：(下面是在Vue中实现的，但所有框架思想一样) //部分代码： // <div class="commendContent" v-html="commendContent"> </div&gt
深入理解 CSS 文本换行： overflow-wrap 和 word-break
最新发布
前端梦工厂
12-12 1573
正常情况下，在固定宽度的盒子中的中文会自动换行。但是，当遇到非常长的英文单词或者很长的 URL 时，文本可能就不会自动换行，而会溢出所在容器。幸运的是，CSS 为我们提供了一些和文本换行相关的属性；今天来研究一下 CSS 中的文本换行。word-breakline-breakhyphens本篇文章重点讲述前两种方式和word-break。
textarea 中文字实现换行
OnlyLove_longshao的博客
08-28 1748
textarea 中文字实现换行 原代码如下： &amp;lt;textarea cols=&quot;50&quot; rows=&quot;5&quot; id=&quot;textareaid&quot;&amp;gt;adfsadfs&amp;lt;br/&amp;gt;fddsadfds \n dfadadf&amp;lt;/textarea&amp;gt; adfsadfsfddsadfds
textarea文本支持换行展示
啥也不会只能CV
03-28 888
要展示的地方 css 关键属性white-space: pre-wrap;
在text area文本域中使文字换行
qq_38256982的博客
05-14 1107
在文本域中使文字换行可以使用"\n"字符； var j = 1; var terminationReasons= ""; for(var i=0; i<arr.length; i++){ if (arr[i] != ""){ terminationReasons += j+"、"+arr[i]+"\n"; j++; } } 效果如下：
HTML常用标签以及CSS常用样式
wasdf231的博客
06-13 1592
HTML常用标签，CSS常用样式
CSS学习笔记
YuKing_HONG的博客
10-17 1548
个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。
前端基础之Html、CSS、JavaScript、JQuery、Ajax
pybstudyjava的博客
03-29 1901
前端 1.HTML XML：可扩展标记语言 XHTML：可扩展的超文本标记语言 1. HTML 概述 HTML：超文本标记语言 网页组成：文字 + 图片 + 表格 + 表单 + 链接 + 视频 + 音频 网页文件的格式：htm ，html 网页的注释：<!-- 注释的内容 --> html 结构 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
学习使用jquery得到文本域textarea内容并换行代码
徊忆羽菲
04-30 918
学习使用jquery得到文本域textarea内容并换行代码
关于<textarea>的内容中换行的表示方法
08-19 109
<textarea>sdfsdfsffsd fer</textarea> 转载于:https://www.cnblogs.com/shanmao/p/3268252.html
css 文字换行
Codernmx
09-07 193
.word { // 必须设置宽度 width: 270px; word-break: break-word; white-space: pre-line; }
textarea 赋值 文本换行显示
weixin_41901345的博客
10-27 1092
textarea 赋值 文本换行显示 需要分行的文本之间使用 \r\n textarea 认识 \r\n ; 不认识<br></br>
Textarea /n 内容展示时实现换行
Stavin Li的博客
03-18 1133
<div class="content">11111111/n2222222/n3333333<div> 添加样式如下： .content{ white-space: pre-line; }
处理多行文本框textarea内容为string，换行兼容ios和andriod
COCOLI_BK的博客
07-26 476
需要注意的是，由于不同平台的换行符可能不同，因此需要使用兼容多端的正则表达式来处理换行符。在上面的代码中，我们使用了。可以使用正则表达式来处理输入文本和换行符。1. 如果手动换行将换行符处理成 |, 每行的左右空格需要清除，中间空格要做兼容多端的操作并且保留下来。2. 每行输入不可超过35个字符，最多140个字符，不包括换行符。表示 Unix/Linux 平台的换行符。正则表达式来匹配并替换换行符。表示 Windows 平台的换行符，表示 Mac 平台的换行符，
前端处理后端返回的数据中有\n\n字样的换行符标识
张张张的博客
08-08 6741
上面圈着的部分就是\n，前端需要将数据进行换行，对于这类型的数据，在前端页面是需要进行稍微处理才能正常显示。如果没有经过处理，那么内容是不会在有换行符的位置进行换行显示的。pre-wrap:连续的空白符会被保留。在遇到换行符或者< br >元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。pre-line连续的空白符会被合并。在遇到换行符或者< br >元素，或者需要为了填充「行框盒子(line boxes)」时会换行。使用v-html输出文本。以上两种方法都可以实现。
＜textarea ＞文本域如何换行
学英语的程序员
03-29 1574
<textareaname="textfield" id="textfield"> <? echo "nnn\n";//这里 \n 好使 echo "bbbb"; echo "<br>";//这里不好使 echo "ddd"; ?> </textarea>
仿京东页面开发实战：HTML+CSS前端作业
仿制网页的练习对于提高前端开发者的技能非常有帮助，它能够锻炼开发者对布局的理解，对设计的敏锐度，以及对用户交互的处理能力。完成这样的作业，可以帮助开发者更好地掌握HTML和CSS，为将来设计和开发更为复杂的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值