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...
<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,'...
但是我获取到的数据放到标签中,/n换行符不识别,还是纯文本的显示方式 打印到控制台是正常带有换行的,但是在页面中却没有,效果如图 在网上查资料,用 v-html绑定也试了,用正则匹配替换<br/>也试了,都没效果代码如下 <p class="detail-text">{{text}}</p> <div v-html="text"></div> let data = res...
我在vue中textarea获取的数据,传到后台,在获取详情的时候,通过接口获取我之前传入的数据。但是我获取到的数据放到标签中,/n换行符不识别,还是纯文本的显示方式 打印到控制台是正常带有换行的,但是在页面中却没有,效果如图 在网上查资料,用 v-html绑定也试了,用正则匹配替换<br/>也试了,都没效果代码如下 <p c...
3.文字文字文字文字文字文字文字文字文字；加了换行\n但是不起作用 解决办法：1.给相关的div加上样式：white-space：pre-line.一行样式就解决，white-space 属性设置如何处理元素内的空白。2.添加pre标签 <pre><p v-html="content"></p></pre> 3.正则匹配，
vue使用v-html渲染带回车“\n”的字符串,先将\n用replace方法进行全部替换。 let [变量名] = String.replace(/\r\n/g,'<br>'); 这样用v-html渲染的时候,还是没有完成正常换行,这时候需要在渲染的标签上使用CSS的:
//html<p v-html='text'></p>//渲染值this.text = "我是第一行的哦\n我是第二行的哦" 但结果却是不如意,变成了下面这样 解决方法 1.在使用 v-html 时添加样式,white-space:pre-wrap ,让浏览器保留空白和换行符。 <p v-html="text" style="white-space:pre-wrap"></p> ...
更多功能和设置可以通过右键点击我打开\nps:目前打开聊天框的时候还不能和我交互,想要语音对话或者拖动我的话,就关掉聊天框吧 显示的时候没有换行。 未换行 解决: 在使用 v-html 时添加样式,white-space:pre-wrap ,让浏览器保留空白和换行符。 style="white-space:pre-wrap" 正常换行...
首先,将字符串里的 \n 替换为 <br>,然后用 v-html 指令渲染字符串为 innerHTML 。 代码如下: // JS部分 this.text = res.data.replace(/\n/g,'<br>') // HTML部分 <div v-html="text"></div> 三、<pre>标签 pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符...