PROSAGA码农传奇-Vue-Vue修剪白色空间

Vue修剪白色空间

作者: 疯子哥哥
发布时间: 2025-03-09 03:07:09 (12天前)
转自：

            我在我的应用程序上使用vue.js，在显示某些内容时，

VUE
</跨度>
当单词之间有多个空格时删除空格。不幸的是，我无法在小提琴上重现这一点（不知道为什么）。我不熟悉

VUE
</跨度>
（我更像是一个后端），所以我很抱歉缺乏细节。要显示的HTML代码如下：＆lt; div slot =“body”v-html =“viewingEmail.message”＆gt;＆lt; / div＆gt;。和样本内容

Vue没有修剪空间。这就是HTML的工作原理。

空间在那里，见下面的演示。


        
          new Vue({
  el: ‘#app’,
  data: {
    message: ‘Hello,    Vue.js!’
  },
  mounted() {
    console.log(‘Notice how the spaces exist in HTML, even though they are not displayed.’);
    console.log(‘divHTML’, this.$refs.divHTML.outerHTML);
    console.log(‘divTEXT’, this.$refs.divTEXT.outerHTML);
  }
})


        
          

  v-html: 

  v-text:

你可以用一个替换空间字符

HTML实体，但这会混乱嵌套元素的属性。

的
我的建议：
</强>

使用
white-space: pre;
样式

。

见下面的演示。

new Vue({ el: ‘#app’, data: { message: ‘Hello, Vue.js!’ } })

.keep-spaces { white-space: pre; }

With “white-space:pre;” spaces are preserved visually. v-html: v-text: