java后台 拼接字符串在前端textarea怎么实现换行

任务分配与协同工作流程
本文详细描述了一个涉及多个部门的工作流程,包括礼仪部、防腐部、工程部、运输部的任务分工,强调了在特定时间点的准备工作,如封棺、遗体处理、包装和运输。同时提到了信息变更对工作流程的影响。

直接在后台+\r即可,前端的textarea会自动识别换行

outTransport.setWorkPreparation("1.礼仪部:20 年 月 日 时准备  号房,进行封棺;\r"+"2.防腐部:20 年 月 日 时准备遗体和棺材,并派人到  号房封棺;\r"+"3.工程部:20 年 月 日 时准备外包装箱(含遗体标识表),并派人到  号房封棺;\r"+"4.运输部:20 年 月 日 时准备铁包装箱,并派人到  号房封棺;尺寸: ;\r"+"5.运输部:20 年 月 日 时送外运棺柩到机场\r"+"6.信息变更: 时 分封棺,并派人到   号房封棺");
  • 前端代码
<th>工作准备</th>
<td colspan="6">
<form:textarea path="workPreparation"  cssStyle="width: 95%;height: 140px"></form:textarea>
</td>
  • 页面效果
    在这里插入图片描述
后台管理系统中,用户通过 `<textarea>` 输入的内容通常包含换行符(如 `\n` 或 `\r\n`),但前端在展示这些内容时,默认不会将换行符渲染为换行效果,因为 HTML 会忽略纯文本中的换行符。 要正确展示保存的 textarea 内容中的换行,有以下几种常用方法: --- ### ✅ 方法一:使用 CSS 的 `white-space` 属性(推荐) 这是最简单、安全且高效的方式。 #### 示例代码: ```html <div class="text-display" style="white-space: pre-line;"> {{ yourSavedText }} </div> ``` 或使用 CSS 类: ```css .text-display { white-space: pre-line; /* 保留换行,合并空白字符,换行符生效 */ word-wrap: break-word; /* 长单词或 URL 自动换行 */ } ``` ```html <div class="text-display"> 用户输入的内容 换行了 又一行 </div> ``` #### 解释: - `white-space: pre-line`: - 合并连续的空白字符(空格)。 - 保留换行符 `\n` 并显示为换行。 - 适合大多数文本展示场景。 - `white-space: pre-wrap`: - 保留所有空白和换行,并允许换行超出容器时自动折行。 - 更接近原始输入格式。 > ⚠️ 不推荐使用 `pre` 标签,虽然它能保留格式,但默认字体是等宽字体,样式不美观。 --- ### ✅ 方法二:前端JavaScript 将 `\n` 替换为 `<br>` 适用于必须使用 HTML 渲染的场景(如 Vue、React 中动态插入 HTML)。 #### 示例(原生 JS): ```javascript function nl2br(text) { return text.replace(/\n/g, '<br>'); } ``` #### 在 Vue 中使用(注意安全): ```vue <template> <div v-html="formattedText"></div> </template> <script> export default { data() { return { rawText: '第一行\n第二行\n第三行' }; }, computed: { formattedText() { return this.rawText.replace(/\n/g, '<br>'); } } }; </script> ``` #### 在 React 中使用: ```jsx function TextDisplay({ text }) { const lines = text.split('\n'); return ( <div> {lines.map((line, index) => ( <span key={index}> {line} <br /> </span> ))} </div> ); } ``` > 🔐 安全提示:如果使用 `v-html` 或 `dangerouslySetInnerHTML`,确保内容可信,防止 XSS 攻击。若内容来自用户输入,建议先做 HTML 转义再替换换行。 --- ### ✅ 方法三:使用 `<pre>` 标签 + 样式美化 ```html <pre style="font-family: inherit; white-space: pre-line; background: #f5f5f5; padding: 10px; border-radius: 4px;"> {{ yourSavedText }} </pre> ``` - 默认 `<pre>` 会保留格式,但字体是 `monospace`,可以通过 `font-family: inherit` 改为继承父级字体。 --- ### 总结对比: | 方法 | 是否推荐 | 优点 | 缺点 | |------|----------|------|------| | `white-space: pre-line` | ✅ 推荐 | 简单、安全、无需 JS | 不能自定义换行样式 | | `\n` → `<br>` + `v-html` | ⚠️ 谨慎使用 | 灵活控制 | 有 XSS 风险,需处理转义 | | `<pre>` + 样式 | ✅ 可用 | 原始格式保留 | 默认样式丑,需美化 | --- ### ❗注意事项: - 后端保存时确保没有过滤或替换 `\n` 换行符。 - 前端获取数据时确认换行符是 `\n` 还是 `\r\n`,可用正则 `/[\r\n]+/g` 统一处理。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java中的战斗机

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值