简介:【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行 最近开发vue2 项目 ,接口返回的是类似于这样的数据:我是第一行的哦\n我是第二行的哦 我是直接这样渲染的, //html<p v-html='text'></p>//渲染值this.text = "我是第一行的哦\n我是第二行的哦" 但结果却是不如意,变成了下...
1.在使用 v-html 时添加样式,white-space:pre-wrap ,让浏览器保留空白和换行符。 <pv-html="text"style="white-space:pre-wrap"></p> 2、用 pre 标签包裹 被包围在 pre 标签中的文本通常会保留空格和换行符。 <pre><pv-html="text"></p></pre> 3、正则替换 用正则表达式把 \n 替换成 这样v-h...
更多功能和设置可以通过右键点击我打开\nps:目前打开聊天框的时候还不能和我交互,想要语音对话或者拖动我的话,就关掉聊天框吧 显示的时候没有换行。 未换行 解决: 在使用 v-html 时添加样式,white-space:pre-wrap ,让浏览器保留空白和换行符。 style="white-space:pre-wrap" 正常换行©著作权归作者所有,...
因此,当Vue通过插值表达式(如{{ text }})渲染包含 的字符串时,这些换行符并不会被识别为HTML中的换行,而是被当作普通字符处理,通常显示为一个空格。 实现文本换行的解决方案 使用<br>标签 将字符串中的 替换为HTML的换行标签<br>,然后使用v-html指令渲染字符串。这种方法可以直接在模板中实现...
vue使用v-html渲染带回车“\n”的字符串,先将\n用replace方法进行全部替换。 let [变量名] = String.replace(/\r\n/g,'<br>'); 这样用v-html渲染的时候,还是没有完成正常换行,这时候需要在渲染的标签上使用CSS的:
<div style="white-space: pre-wrap">{{'这是一个\n换行符'}}</div> white-space还有其他属性值,包括:normal、pre、nowrap、pre-wrap、pre-line、inherit,详细用法可自行查询。 方法二、用<br>全局替换字符串中的\n,然后使用v-html <div v-html="text"></div> this.text = str.replace(/\n/g,'...
Vue v-html换行处理 v-html输出一段 html代码,可能 ‘\n’ 等换行字符失效 此时要加个css white-space: pre-wrap; 就能成功换行 normal 连续的空白符会被合并,换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。 nowrap
3.文字文字文字文字文字文字文字文字文字；加了换行\n但是不起作用 解决办法：1.给相关的div加上样式：white-space：pre-line.一行样式就解决，white-space 属性设置如何处理元素内的空白。2.添加pre标签 <pre><p v-html="content"></p></pre> 3.正则匹配，
<div class="ke-post " v-if="goodPage.data" v-html="this.goodPage.data.info.goods_desc.replace(/\r?\n/g, '<br />')"> </div> 有用2 回复 慢思考快行动 36118 发布于 2018-05-21 数据不会换行?那你的div的宽度是多少?你设置了超出换行的属性了吗? 有用 回复 无忧: 谢谢,已经解...
vue中用v-html渲染出来的数据不会自动换行 无忧 2821324 发布于 2018-05-20 Jenny 84921212 更新于 2018-05-21 </div>--> <div class="ke-post " v-if="goodPage.data" v-html="this.goodPage.data.info.goods_desc"> </div>什么方法都试过了,就是不换行...