Question

使用Bootstrap 3，我想并排展示两个json blob。我想使用水平或垂直滚动条来保持json的可读性（而不是断行）。

希望它看起来像这样：

相反，它看起来像这样：

使用此代码：

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <div class="col-md-6" style="background-color: #ddd">
                    [
                    {
                    "_id": "5d2f47bc79a22d920c706366",
                    "index": 0,
                    "guid": "cd32479c-ebdd-4de5-ab46-eeb5bbdcda39",
                    "isActive": false,
                    "balance": "$3,303.69",
                    "picture": "http://placehold.it/32x32",
                    "age": 21,
                    "eyeColor": "brown",
                    "name": "Montgomery Freeman",
                    "gender": "male",
                    "company": "EVENTIX",
                    "email": "montgomeryfreeman@eventix.com",
                    "phone": "+1 (891) 433-2525",
                    "address": "757 Beard Street, Roulette, West Virginia, 7144",
                    "about": "Qui reprehenderit aliquip est anim Lorem elit fugiat. Et quis esse enim consectetur laboris laboris commodo Lorem exercitation ad sunt. Officia nulla commodo amet occaecat fugiat officia dolor mollit. Velit ut reprehenderit cillum duis tempor dolore elit duis tempor aute Lorem ea excepteur. Velit id id elit occaecat minim eiusmod qui ipsum nisi. Dolor pariatur anim ipsum culpa. Dolor nulla eiusmod ut sit voluptate excepteur nisi culpa proident aliquip esse.\r\n",
                    "registered": "2015-12-21T07:31:05 +05:00",
                    "latitude": 43.355285,
                    "longitude": 61.420368,
                    "tags": [
                    "ut",
                    "consequat",
                    "nisi",
                    "qui",
                    "et",
                    "exercitation",
                    "quis"
                    ],
                    "friends": [
                    {
                    "id": 0,
                    "name": "Crystal Mcdowell"
                    },
                    {
                    "id": 1,
                    "name": "Grace Gilbert"
                    },
                    {
                    "id": 2,
                    "name": "Stevens Frost"
                    }
                    ],
                    "greeting": "Hello, Montgomery Freeman! You have 9 unread messages.",
                    "favoriteFruit": "strawberry"
                    }
                    ]
                </div>
                <div class="col-md-6" style="background-color: #ddd">
                    [
                    {
                    "_id": "5d2f47bc79a22d920c706366",
                    "index": 0,
                    "guid": "cd32479c-ebdd-4de5-ab46-eeb5bbdcda39",
                    "isActive": false,
                    "balance": "$3,303.69",
                    "picture": "http://placehold.it/32x32",
                    "age": 21,
                    "eyeColor": "brown",
                    "name": "Montgomery Freeman",
                    "gender": "male",
                    "company": "EVENTIX",
                    "email": "montgomeryfreeman@eventix.com",
                    "phone": "+1 (891) 433-2525",
                    "address": "757 Beard Street, Roulette, West Virginia, 7144",
                    "about": "Qui reprehenderit aliquip est anim Lorem elit fugiat. Et quis esse enim consectetur laboris laboris commodo Lorem exercitation ad sunt. Officia nulla commodo amet occaecat fugiat officia dolor mollit. Velit ut reprehenderit cillum duis tempor dolore elit duis tempor aute Lorem ea excepteur. Velit id id elit occaecat minim eiusmod qui ipsum nisi. Dolor pariatur anim ipsum culpa. Dolor nulla eiusmod ut sit voluptate excepteur nisi culpa proident aliquip esse.\r\n",
                    "registered": "2015-12-21T07:31:05 +05:00",
                    "latitude": 43.355285,
                    "longitude": 61.420368,
                    "tags": [
                    "ut",
                    "consequat",
                    "nisi",
                    "qui",
                    "et",
                    "exercitation",
                    "quis"
                    ],
                    "friends": [
                    {
                    "id": 0,
                    "name": "Crystal Mcdowell"
                    },
                    {
                    "id": 1,
                    "name": "Grace Gilbert"
                    },
                    {
                    "id": 2,
                    "name": "Stevens Frost"
                    }
                    ],
                    "greeting": "Hello, Montgomery Freeman! You have 9 unread messages.",
                    "favoriteFruit": "strawberry"
                    }
                    ]
                </div>
            </div>
        </div>

Answer 1

在这种情况下，

<pre>标签可以为您提供帮助。

JS代码：
document.getElementById("json").innerHTML = JSON.stringify(data, undefined, 2);

HTML代码：
<pre id="json"></pre>

为
启用滚动 <div style="overflow:auto;"><pre id="json"></pre></div>

Answer 2

如果您不想使用pre元素（通常会更改字体和其他内容），只需根据需要设置wrap和overflow属性：

.inner { /* a wrapper for your text */
    white-space: pre;
}
.outer { /* maybe on your column element */
    overflow: auto;
}

用水平和垂直滚动条显示文本？

2 个答案: