html中保留空格及换行

标签中加入样式white-space: pre-line;会保留页面中的空格以及换行
示例:

<div style="white-space: pre-line;">
	一、我是第一部分内容
	二、我是第二部分  内容
	三、我是第三  部分内容
	四、我是第四部分内容
	五、我是第五部分内容
</div>

最终结果如图:
在这里插入图片描述

### 解决 Ruoyi 框架中富文本编辑器的空格换行处理 在 Ruoyi 开源框架的通知公告功能中使用的 Summernote 富文本编辑器存在一些格式丢失的问题,特别是对于空格换行的处理[^1]。 #### HTMLCSS 调整 为了确保空格换行能够正常显示,在保存富文本内容到数据库之前可以考虑调整 HTML 结构以及应用特定的 CSS 样式。通过设置 `white-space` 属性来控制空白字符(包括空格、制表符和换行)的行为: ```css pre { white-space: pre-wrap; /* 保留空白符序列,并允许文本自动换行 */ } ``` #### JavaScript 额外处理逻辑 除了前端样式上的修改之外,还可以利用 JavaScript 对输入的内容做进一步处理。例如,在提交前将连续多个空格转换成实体字符 (` `) 或者使用正则表达式替换不必要的换行符: ```javascript // 将多于两个连在一起的空格转为   function formatSpaces(content) { return content.replace(/ {2,}/g, (match) => ' '.repeat(match.length)); } // 提交数据时调用此函数预处理内容 const processedContent = formatSpaces(editorInstance.code()); ``` #### 数据库存储优化 当涉及到从数据库读取并展示这些带有特殊格式的数据时,应该注意服务器端渲染过程中可能发生的编码问题。确保 PHP/Java 等服务端语言正确解析了 HTML 实体标签,从而让浏览器能按照预期呈现页面效果。 #### 后台配置项增强 如果上述方法仍无法满足需求,则可以在后台管理界面增加更多自定义选项供管理员灵活设定不同场景下的表现形式。比如提供开关按钮让用户决定是否开启严格的格式保持模式等特性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值