【2023-2-8】前端JSON格式展示，pre标签首行缩进问题

最新推荐文章于 2024-04-10 15:55:05 发布

lookingForw_4585

最新推荐文章于 2024-04-10 15:55:05 发布

阅读量1.3k

点赞数 1

分类专栏：前端经验分享特效文章标签：前端 json javascript

本文链接：https://blog.csdn.net/weixin_43797046/article/details/128934948

版权

前端同时被 3 个专栏收录

27 篇文章 2 订阅

订阅专栏

经验分享

16 篇文章 0 订阅

订阅专栏

特效

7 篇文章 0 订阅

订阅专栏

前端JSON格式展示，pre标签首行缩进问题

场景
解决首行缩进
- 示例代码：
- 示例效果：
展示JSON格式
- 完整示例：
- 示例效果：
补充：

场景

前端展示后台返回的JSON字符串，使用pre标签包裹后，显示内容首页出现缩进。类似于下方效果：
在这里插入图片描述

解决首行缩进

尝试修改pre标签的css样式，均无法解决问题。多方查阅后，发现造成此问题的原因为pre标签内显示内容与其存在换行pre标签为原样显示内部内容，当存在换行后，就相当于空白字符，导致缩进
将显示内容与其写在一行就可以解决问题

示例代码：

示例返回json字符串，无\n或者\r换行符


  <div style="width:1000px;height:100%;margin: 20% auto;background-color: #c6ddaa;">
    <!-- 错误示范
    <pre id='preId' style="white-space: pre;">
      {"name":"张三","age":11,"desc":"11岁的张三","current":{"name":"张三","age":22,"desc":"法外狂徒张三"}}
		</pre> -->
    <!-- 正确写法，解决首行缩进 -->
    <pre id='preId' style="white-space: pre;">{"name":"张三","age":11,"desc":"11岁的张三","current":{"name":"张三","age":22,"desc":"法外狂徒张三"}}
		</pre>
  </div>

示例效果：

在这里插入图片描述

展示JSON格式

完整示例：

<!Doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>JavaScript+pre标签实现JSON格式化展示</title>
  <script>
    onload = function () {
      var jsonString = document.getElementById('preId').innerText;
      var jsonObj = JSON.parse(jsonString);
      document.getElementById('preId').innerHTML = JSON.stringify(jsonObj, null, 4);
    }
  </script>
</head>

<body style="background-color: #e6eaed;margin:0;">
  <div style="width:1000px;height:100%;margin: 20% auto;background-color: #c6ddaa;">
    <!-- 错误示范-->
    <!-- <pre id='preId' style="white-space: pre;">
      {"name":"张三","age":11,"desc":"11岁的张三","current":{"name":"张三","age":22,"desc":"法外狂徒张三"}}
		</pre>  -->
    <!-- 正确写法，解决首行缩进 -->
    <pre id='preId' style="white-space: pre;">{"name":"张三","age":11,"desc":"11岁的张三","current":{"name":"张三","age":22,"desc":"法外狂徒张三"}}
		</pre>
  </div>
</body>

</html>