在HTML页面写入\r\n换行不起作用

1、在html中不识别\r\n，但有换行标签<br/>，可以通过正则表达式替换:

<template>
  <div id="app" v-html="html"></div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      html: ''
    };
  },
  created() {
    var html = '第一行\r\n第二行\r\n第三行';
    var reg = new RegExp("\r\n", "g");
    this.html = html.replaceAll(reg, '<br/>');
  }
};
</script>

2、css提供了一个white-space属性来指定元素空白的处理方式

可以通过设置white-space: pre-wrap、white-space: pre-line和white-space: break-spaces解决，取决于你需要的效果。

3、详细了解一下white-space

DEMO代码

<template>
  <div id="app">
    <div class="wrap">
      第一行
      第二行
      第三行的内容有点长     这中间有好几个空格  这中间有好几个空格       这中间有好几个空格
    </div>
  </div>
</template>

<style>
#app {
  width: 100%;
  height: 100%;
  background-color: white;
  padding: 20px;
}
.wrap{
  width: 200px;
  background-color: pink;
}
</style>

3.1 normal：默认。多余的空白会被浏览器忽略，只保留一个空白。

空格被合并了并且未换行

3.2 pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

 空白被保留了，但内容未自动换行

3.3 nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

 空格被合并了，文本未换行

3.3 pre-wrap：保留空白符序列，但是正常地进行换行。

保留了空白并自动换行

3.4 pre-line：合并空白符序列，但是保留换行符。

合并了空白并自动换行

 3.5 inherit：规定应该从父元素继承 white-space 属性的值。

3.6 break-spaces：保留空白符，正常的换行。

保留了空白并自动换行