Vue框架中使用white-space: pre;和在html文件中显示不同

Vue框架中使用white-space: pre;和在html文件中显示不同
在html文件中

<style>
   .right {
   width: 300px;
   height: 300px;
   border: 3px skyblue solid;
   text-align: center;
   margin: 10px auto;
   white-space: pre;
}
    </style>
<div class="right">
    这是一行文这是一行文本本
    这是一行文本这是一行文本
    这是一行文本这是一行文本
    这是一行文本这是一行文本
    这是一行文本这是一行文本
    这是一行文本这是一行文本
    这是一行文本这是一行文本
</div>

在Vue中

  <div>
    <div class="right">
      这是一行文这是一行文本本
      这是一行文本这是一行文本
      这是一行文本这是一行文本
      这是一行文本这是一行文本
      这是一行文本这是一行文本
      这是一行文本这是一行文本
      这是一行文本这是一行文本
    </div>
  </div>
<style scoped>
.right {
  width: 300px;
  height: 300px;
  border: 3px skyblue solid;
  text-align: center;
  margin: 10px auto;
  white-space: pre;
}


</style>

这是为什么呢?

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7397658
• 这篇博客你也可以参考下：Vue - flex布局 justify-content: space-around / space-between 最后一行元素不对其解决方案（JS）
• 除此之外, 这篇博客: vue整合文本编辑器中的 0、富文本编辑器的插件和组件 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  链接：https://pan.baidu.com/s/1OK770qsv1Ozv-4FWLjCtdg 
  提取码：5ggs 
  复制这段内容后打开百度网盘手机App，操作更方便哦--来自百度网盘超级会员V4的分享
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^