textarea保存时的换行格式，如何显示在table中

最新推荐文章于 2024-01-20 11:22:36 发布
最新推荐文章于 2024-01-20 11:22:36 发布
阅读量768 收藏
点赞数
文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shine1162226/article/details/107260417
版权
博客讨论了textarea中保存的换行在显示到HTML的el-table时丢失的问题，并提出了解决方案，即使用特定标签来保持换行效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如图：保存的时候是有换行格式的
在这里插入图片描述
当再显示在el-table中时,是没有换行的
在这里插入图片描述
修改：

<div class="table">
            <el-table stripe @row-click="handleRowClick" row-key="id" :data="dutyLogList" height="100%">
              <el-table-column width="180px" :label="$t('DutyLog.CreateTime')"
最低0.47元/天 解锁文章
沸羊羊yang
关注
基于layui实现的可编辑、可回车进入下一行的表格
猫晨的技术小屋
08-04 662
基于layui实现的可编辑、可回车进入下一行的表格
javaEE初阶 — HTML 中的常见标签
超烦豆先森
03-08 1509
注释标签、标题标签：h1 h6、段落标签：p、换行标签：br、格式化标签、图片标签：img、img 的 alt 属性、img 的 title 属性、width 与 heigth 属性用来描述图的尺寸、超链接标签：a、表格标签、列表标签、表单标签、from 标签、input 标签、select 标签、textarea 标签、无语义标签：div span
关于在textarea输入换行内容保存到数据库，在页面显示换行效果
frankfan123的博客
04-12 5490
之前做一个textarea内容添加页面，要求能够换行，网上搜了搜是因为数据库自动把&lt;br&gt;替换成了\n,可以通过jquery替换回来，我试了试感觉没有效果，可能因为我是菜鸟。最后在一个相同问题的帖子下的回复里找到了合适的解决办法，加个&lt;pre&gt;标签就行了，它会保存换行符。虽然内容多了边框，不太好看，不过使用起来还是很简单的。...
vue中textarea填入的换行以及空格，页面显示转换方法
qq_35101267的博客
04-14 9077
textarea输入的空格以及换行，如果不转换，那么换行跟空格的效果会消失； 显示的代码： <span v-html="formInline.content"></span> 解决办法： // 换行转为换行符 this.model.content = this.model.content.replace(/\n/g,'<br/>'); // 空格...
实现TEXTAREA数据写入数据库后提取出来原样显示在网页TABLE上并自动换行
79bo的专栏
01-25 1308
                        这里是提取的内容           
简单的解决textarea文本框内容换行，对应到页面的内容也换行的问题
热门推荐
那一日面朝大海的博客
01-26 1万+
当我们在页面上通过 textarea 提交数据的时候，我们输入的内容在提交后都会被处理为了一段内容，即使我们在 textarea 里面输入了很多的换行，提交后也是一段内容，那如果我们需要将我们输入的信息按照输入的形式保存下来该如何做呢？ 最近项目中就遇到了这样一个需求，页面左边是展示部分，右边是表单用来添加资料， 表单里有textarea文本框，在里面输入内容，可以回车换行，然后点
表单中对textarea的处理及显示
z69183787的专栏
01-29 3381
mysql textarea读取换行问题
09-04
在MySQL中，textarea的换行问题主要与如何存储和读取数据有关。 首先，我们需要了解MySQL中的数据类型。对于保存多行文本的需求，我们可以使用TEXT类型，它可以存储较大的文本数据。使用TEXT类型可以确保我们的数据...
前端技术深度探讨：在Vue中使用CodeMirror进行SQL代码格式化的高级技巧（全面解析）
!... # 摘要 本文探讨了Vue与CodeMirror集成的深入应用，涵盖了从基础集成到高级交互...此外，文章还分享了提高SQL代码格式化效果的优化策略和用户体验提升技巧，并对Vue项目中的维护与扩展性进行了讨论。最后，展望了C
textarea标签中间出现空格问题
练涛
05-05 1774
的中间的空格问题 在中间留空格或者两者不在同一行，会导致文本域中会出现莫名的空格。 示例： &lt;textarea&gt;后面有空格 &lt;/textarea&gt; &lt;textarea&gt; 内容 &lt;/textarea&gt; 导致出现图中的蓝色部分空格内容出现： 正确写法: &lt;textarea&gt;内容&lt;/textarea&gt;...
textarea文本支持换行展示
啥也不会只能CV
03-28 903
要展示的地方 css 关键属性white-space: pre-wrap;
html---textarea初始化时就有个table空格以及tab键操作无效
weixin_34379433的博客
02-21 424
1 初始化时就有一个tab空格     这是由于&lt;textarea&gt;&lt;/textarea&gt;之间的内容不为空的原因，包含空格和换行，否则浏览器会觉得空格或者换行都是文本域的内容。因此书写时需将&lt;textarea&gt;&lt;/textarea&gt;紧靠在一起。 2 tab键对textarea操作无效     在textarea中使用tab键时是无效...
Vue+ElementUI技巧分享：el-table 中实现灵活的文本换行
最新发布
吾家有猫名探花的博客
01-20 1万+
Element UI 是 Vue.js 的一个流行组件库，广泛应用于构建企业级前端界面。在数据密集型的应用程序中，el-table组件是展示和处理数据的核心。本文将详细探讨如何在el-table的单元格中实现不同的换行方式，以优化数据的显示效果。通过以上几种方法，可以在 Element UI 的el-table组件中灵活地实现不同的换行方式，以适应各种数据展示的需求。无论是处理含有换行符的文本、显示数组数据，还是动态生成表格列，Element UI 都提供了强大且灵活的解决方案。
textarea的文字显示
a432qbc的博客
04-22 1289
html <div class="message-ly"> <div class="message-ly-mask"></div> <div class="say-box" data-slide-in="at 3000 from zoomIn use linear during 2000"> <i class="message-ly-close"></i> <div class="mes.
Textarea插入表格table，保存到数据库。jsp页面显示表格问题
阳光宅男
08-05 5275
自己做的一个小项目中。在一个textarea域中加一个表格。这在不借助插件的情况下是不能做到的。于是我们找了一个国内人做的一个开源插件：Kindeditor。这款插件在国内还是没多人用的，而且本版也到4.x了，相对来说比较成熟。而csdn用的是xheditor。不管怎么样，只要能实现我们想要的功能就ok。 这里不介绍怎么具体去使用这个插件。主要讲述遇到的两个问题。 第一：后台取不到Textar
解决textarea显示多余的空行空格问题
weixin_30501857的博客
11-16 705
问题描述：用textarea显示一段文字，发现有时候有多余的空行、空格。 问题原因：代码格式导致。 解决办法：标签<textarea>和</textarea>写在同一行中 演示实例： 　　代码： 1 <html> 2 <title>解决textarea显示多余的空行空格问题</title> 3 &l...
element-ui中的表格el-table滚动条样式修改以及textarea样式修改
Dragonfly_w的博客
11-24 4537
el-table 滚动条的修改（全是在全局样式中定义） 单独修改elementui 组件滚动条的样式 // 滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 6px; // 横向滚动条 height: 6px; // 纵向滚动条 必写 } // 滚动条的滑块 /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { backg
前端使用el-input输入框保存的数据，怎么样在展示时显示输入的空格、tab、回车，可以使用pre标签
migexiaoliang的博客
11-08 2082
使用input输入框，但是想让在input框输入的空格、tab、回车等在网页上直接显示，那么可以使用pre来展示。
el-table 列内容溢出 显示省略号 悬浮显示文字
Sunshine_Jian的博客
08-03 1万+
el-table 表格列内容溢出，文本溢出，显示省略号，单行、多行省略；鼠标悬浮hover（点击click等其他其他事件）显示文字，包括el-tooltip、el-popover、show-overflow-tooltip、title等其他的一些实现方法的总结，以及一些想法的分享！...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值