Fatal编程技术网
  • html/
  • Html 使用水平和垂直滚动条显示文本？

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

html css twitter-bootstrap-3

Html 使用水平和垂直滚动条显示文本？,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,使用Bootstrap3，我想并排展示两个json blob。我希望使用水平或垂直滚动条来保持json的可读性（而不是断行） 希望它看起来像这样： 相反，它看起来是这样的： 使用此代码： <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body">

使用Bootstrap3，我想并排展示两个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>


[
{
“_id”：“5d2f47bc79a22d920c706366”，
“索引”：0，
“guid”：“cd32479c-ebdd-4de5-ab46-eeb5bbdcda39”，
“isActive”：错误，
“余额”：“$3303.69”，
“图片”：http://placehold.it/32x32",
“年龄”：21岁，
“眼睛颜色”：“棕色”，
“姓名”：“蒙哥马利·弗里曼”，
“性别”：“男性”，
“公司”：“EVENTIX”，
“电子邮件”：montgomeryfreeman@eventix.com",
“电话”：“+1（891）433-2525”，
“地址”：“西弗吉尼亚州轮盘赌比尔德街757号，邮编7144”，
“关于”："我代表的是优秀的动物知识。我代表的是优秀的动物知识。我代表的是优秀的动物知识。我代表的是优秀的动物知识。我代表的是优秀的动物知识。我代表的是优秀的动物知识所有人都有自己的过错。如果不存在过错，则不存在自责。\r\n“，
“注册”：“2015-12-21T07:31:05+05:00”，
“纬度”：43.355285，
“经度”：61.420368，
“标签”：[
“ut”，
“consequeat”，
“nisi”，
“魁”，
“et”，
“实习”，
“基斯”
],
“朋友”：[
{
“id”：0，
“名称”：“Crystal Mcdowell”
},
{
“id”：1，
“姓名”：“格雷斯·吉尔伯特”
},
{
“id”：2，
“姓名”：“史蒂文斯·弗罗斯特”
}
],
“问候语”：“你好，蒙哥马利·弗里曼！你有9条未读邮件。”，
“最喜欢的水果”：“草莓”
}
]
[
{
“_id”：“5d2f47bc79a22d920c706366”，
“索引”：0，
“guid”：“cd32479c-ebdd-4de5-ab46-eeb5bbdcda39”，
“isActive”：错误，
“余额”：“$3303.69”，
“图片”：http://placehold.it/32x32",
“年龄”：21岁，
“眼睛颜色”：“棕色”，
“姓名”：“蒙哥马利·弗里曼”，
“性别”：“男性”，
“公司”：“EVENTIX”，
“电子邮件”：montgomeryfreeman@eventix.com",
“电话”：“+1（891）433-2525”，
“地址”：“西弗吉尼亚州轮盘赌比尔德街757号，邮编7144”，
“关于”：我代表的是优秀的动物知识。我代表的是优秀的动物知识。我代表的是优秀的动物知识。我代表的是优秀的动物知识。我代表的是优秀的动物知识。我代表的是优秀的动物知识所有人都有自己的过错。如果不存在过错，则不存在自责。\r\n“，
“注册”：“2015-12-21T07:31:05+05:00”，
“纬度”：43.355285，
“经度”：61.420368，
“标签”：[
“ut”，
“consequeat”，
“nisi”，
“魁”，
“et”，
“实习”，
“基斯”
],
“朋友”：[
{
“id”：0，
“名称”：“Crystal Mcdowell”
},
{
“id”：1，
“姓名”：“格雷斯·吉尔伯特”
},
{
“id”：2，
“姓名”：“史蒂文斯·弗罗斯特”
}
],
“问候语”：“你好，蒙哥马利·弗里曼！你有9条未读邮件。”，
“最喜欢的水果”：“草莓”
}
]

为

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

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