场景
前端展示后台返回的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>
示例效果:
补充:
后台返回存在\n
或者\r
换行符时,使用pre标签可自动换行,当出现首行缩进是,使用上面解决首行缩进的方法即可解决。
问题场景存在局限性,仅作为自身解决问题的记录