1.原生html 下面的写法都不能识别 white-space: pre-line

<h2 style="white-space: pre-line;">test\nhtml</h2>
<h2 style="white-space: pre-line;">'test\nhtml'</h2>
<h2 style="white-space: pre-line;">'test"\n"html'</h2>
解决办法：
(1)正则将\n匹配</br>
    <h2 style="white-space: pre-line;">test\nhtml</h2>
    <script>
        //使用正则将\n替换成<br/>标签
        const h2 = document.querySelector('h2')
        h2.innerHTML =  h2.innerHTML.replace(/\\n/g,'<br>') //注意正则是/\\n/g
        //也可以分割字符串然后再拼
        //h2.innerHTML =  h2.innerHTML.split('\\n').join("<br>")//注意\\n
    </script>
</body>
(2) 获取到标签，用html赋值
    <h2 style="white-space: pre-line;">test\nhtml</h2>
    <script>
        const h2 = document.querySelector('h2')
        h2.innerHTML = 'test\nhtml'
    </script>
</body>
2.vue
vue中在scrpit中定义变量str，在html中用{{str}}渲染就行
<template>
  <div class="test">
    <h2 style="white-space: pre-line">{{ str }}</h2>
  </div>
</template>
<script setup lang="ts">
let str = 'test\nvue'
</script>
3.react
const str = 'test\nreact'
return <h1 style={{ whiteSpace: 'pre-line' }}>{str}</h1>
总结：html没法识别\n，可以转换成<br>标签，或者在js里操作。
 
 
  
 
 

      
 
粉丝
 
 
 
  
相关推荐
 
还在封装 xxxForm，xxxTable 残害你的同事？试试这个工具
 
 
2.2k阅读
 
 · 
 
35点赞
【深圳招聘】凹凸实验室 Taro 团队招人啦！
 
 
1.4k阅读
 
 · 
 
10点赞
Flutter基建 - Hero动画有多英雄
 
 
186阅读
 
 · 
 
4点赞
小册上新 | 前端工程体验优化实战
 
 
1.4k阅读
 
 · 
 
1点赞
JS的内存泄露与垃圾回收机制
 
 
88阅读
 
 · 
 
1点赞
 
  
  
友情链接：