渲染HTML中的字符串并保留空格和换行符

最新推荐文章于 2024-05-11 23:45:19 发布
最新推荐文章于 2024-05-11 23:45:19 发布
阅读量1.2k 收藏
点赞数
分类专栏： 蒙古文信息处理 文章标签： java mysql html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42313854/article/details/121408026
版权

从数据库渲染到前端HTML时默认情况下很多字符包含换行符\u000d\u000a是不会被渲染的，被浏览器直接显示为多个 /内码为\u0020\u000d\u000a\u000d\u000a\u0026\u0023\u0031\u0036\u0030\u003b（可能不准确）。

对此情况

网上找到遇见跟我一样问题的帖子

https://www.imooc.com/wenda/detail/597381

解决方法

div{
     white-space: pre-wrap;
   }

我测试了一下，pre-line，break-spaces都能解决我的问题。

white-space总结

https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

Oyvnbilig
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE渲染后端返回含有script标签的html字符串示例
10-16
今天小编就为大家分享 一篇VUE渲染后端返回含有script标签的html字符串示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在html渲染中保留空格
山海一哥的博客
01-21 2560
有时候我们渲染页面的时候，需要多个空格可以使用 ,除此之外我们也可以用标签 <pre> for i = 1 to 10 print i next i </pre> 该标签会原样展示，并不会被浏览器合并多个空格，这里是文本，所以看不出效果 ...
html换行符到表格中无效,解决HTML中换行符渲染成空白符问题
weixin_33231055的博客
06-03 743
//htmlHomeSpaceshipsPlanetsStars//cssnav {display: block;}.navbar ul {font-family: 'Avenir Next', Avenir, Corbel, sans-serif;list-style: none;padding: 0;background-color: #486a8e;}.navbar li {text-tr...
字符串渲染到界面过长换行问题
qq_30856967的博客
07-21 331
'前段文字 '+"\n"+‘要换行文字’ 然后在包裹他们的div样式里面加 white-space: pre-line;(合并空白符序列，但是保留换行符。)
IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法...
weixin_30834019的博客
04-01 120
直接上图：原因：该div包含的内容是靠后台进行print操作，输出的。如果没有输出任何内容，浏览器会默认给该空白区域添加空白符。在IE6、7下，浏览器解析渲染时，会认为空白符也是占位置的，默认其具有字体的属性，所以也就出现“多余占位”的bug。 解决方法： 一、让html标签相接输出。例如：<div></div>。　　——太过麻烦，代码也不规则，不好维护。 二、设置f...
使用v-html进行渲染如何使标签按照字符串显示，特殊样式标签(自己添加的部分)按照标签解析
zifengningyu的博客
07-24 646
使用v-html进行渲染如何使标签按照字符串显示，特殊样式标签(自己添加的部分)按照标签解析
vue实现在v-html的html字符串中绑定事件
12-30
需要在v-html的html字符串的button中绑定点击事件，需要点击后做一些操作，必须渲染成html，但是渲染后的html里面写绑定事件的代码没有经过vue编译，所以事件无效。 <div v-html=html click=addComment($event)> ...
snabbdom-to-html:将Snabbdom Vnode渲染为HTML字符串
05-02
转换为HTML 将 Vnode渲染为HTML字符串安装使用可以： npm install snabbdom-to-html用法var h = require ( 'snabbdom/h' )var toHTML = require ( 'snabbdom-to-html' )var output = toHTML ( h ( 'div' , { style :...
python按行读取文件并找出其中指定字符串
01-20
python按行读取文件并找出其中指定字符串 #coding=utf-8 import os, time, sys, re #reload(sys) #sys.setdefaultencoding(utf8) # 不设置，否则编码方式不对应，无法找出字符串 file = open(path) sum=0 for ...
记录-vue和React渲染html字符串
兔子的博客
12-16 661
当获取后端数据，例如富文本的数据，通常前端获取到是一串html的字符串。记录vue和react渲染html字符串的方式。
js中动态添加长字符串，并保持换行
woaiwenjun的博客
08-01 2506
var testHtml = heredoc(function(){/* 需要换行的html代码。 */ }); /*长字符串换行*/ function heredoc(fn) {     return fn.toString().split('\n').slice(1,-1).join('\n') + '\n' }
html script 换行,JavaScript中实现换行的方法
weixin_32955259的博客
06-08 3315
JavaScript中实现换行的方法发布时间：2021-03-15 10:55:53来源：亿速云阅读：122作者：小新小编给大家分享一下JavaScript中实现换行的方法，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！js中换行的方法：1、使用【\n】换行符，代码为【alert("第一行\n第二行")】；2、使用【\r】换行符，代码为【alert("第一行\r第二行")】；3、使...
如何在HTML页面中保留空格和换行符
热门推荐
马靖的个人技术博客
04-29 2万+
我们知道，在浏览器对HTML页面进行渲染显示的时候，会对HTML文件中的空格和换行符进行处理，这样我们原来写在HTML文件中的格式化就可能起不到效果，尤其是在我们想展示结构化程序代码时就会遇到问题，如下所示： for i = 1 to 10 print i next i 这样的HTML文件在浏览器上显示时就会全部打印在一行上，如下所示： for i = 1 to 10
后端返回的数据中带换行符，前端渲染时处理-vue
dreamy_wx的博客
01-04 997
<span v-html="text"></span> data() { return { text: '', } }, mounted() { let str = 'PHONE00644[2021123109442733041111]订单已锁定，不能生效！；\nPHONE00645[202112310945032522217]订单已锁定，不能生效！；\nPHONE0063[2021123109451054533337]订单已锁定，不能生效！；\n
说说html <p>元素的文本换行
千梵的博客
06-16 2547
今天通过measureText()方法计算文字宽度，想实现文字左右滑动翻页的效果。却发现某些地方老是不对，后来才发现是换行规则在作怪。 这里就不说word-wrap和word-break这两个css样式了，因为问题与它们无关，姑且保持默认。另外下面的内容都是在指定浏览器下测试，其他浏览器不保证一致。 1. 标点不在行首 这是众所周知的规则，如果自动换行时发现标点在行首，会向前寻找非标点...
浏览器渲染机制
qq_45022698的博客
07-16 3708
浏览器渲染机制浏览器渲染机制。
java jar包如何运行或调用
NLP与推荐算法
05-08 380
java服务启动
CMS垃圾回收器为什么被移除
m0_54187478的博客
05-10 431
由于上述缺点，加上需要将资源投入到更现代垃圾回收器的开发和优化上，Oracle决定从Java 9开始标记CMS为废弃，并在后续版本中完全移除CMS。这些新的收集器旨在提供更低的停顿时间和更高的性能，同时减少配置和维护的复杂性。当它在垃圾收集周期内无法足够快地回收内存时，会退回到一种需要完全暂停所有应用线程的老年代收集模式，这与它设计的初衷相违背。：CMS使用的标记-清除算法会导致较多的内存碎片。：CMS需要更多的CPU资源来执行垃圾回收的并发阶段，而且它在运行时对系统资源的利用也较为激进。
【全面介绍下Spring】
最新发布
2301_81357485的博客
05-11 590
Spring框架提供了用于构建Web应用程序的多个模块，如Spring MVC、Spring WebFlux和Spring Web Services。Spring使用IoC容器来管理应用组件之间的依赖关系，通过IoC，开发人员可以将对象的创建和组装转移给Spring容器来管理，从而降低了组件之间的耦合。🌈总之，Spring框架为Java应用程序开发提供了丰富的功能和强大的扩展性，它通过提供模块化的解决方案和简化开发流程，帮助开发人员更高效地构建高质量的企业级应用程序。
html 怎么渲染html字符串
09-12
在浏览器中渲染 HTML 字符串可以使用 JavaScript。你可以通过以下几种方式实现： 1. 使用 innerHTML 属性：如果要将 HTML 字符串渲染到某个元素内部，可以使用该元素的 innerHTML 属性。例如，假设有一个 id 为 "myElement" 的元素，你可以使用以下代码将 HTML 字符串渲染到该元素内部： ```javascript document.getElementById("myElement").innerHTML = yourHTMLString; ``` 2. 使用 createElement 和 appendChild 方法：如果想要创建一个新的元素，并将 HTML 字符串作为其内容插入到 DOM 中，可以使用 createElement 方法创建新元素，然后使用 appendChild 方法将其添加到目标元素中。例如： ```javascript var newElement = document.createElement("div"); newElement.innerHTML = yourHTMLString; document.body.appendChild(newElement); ``` 3. 使用模板引擎：如果你的项目中使用了模板引擎（如 Handlebars、Mustache 等），你可以使用模板引擎提供的方法来渲染 HTML 字符串。具体使用方法可以参考相应模板引擎的文档。 无论你选择哪种方法，记得在操作 HTML 字符串时要注意安全性，避免引入恶意代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值