此时情绪此时天，无事小神仙
好好生活，平平淡淡每一天

编辑

CCS属性 Json自动换行

效果图

image

CCS属性

在固定宽度width:800px;的前提下，包裹Json元素块中添加属性 word-break: break-all;

Html代码

<html lang="en">
<head>
<meta charset="utf-8">
<title>Json换行</title>
</head>

<style type="text/css">
	body{
		background: #DCE2F1;
		width: 100%;
		height: 100%;
	}
	table{
		border:1px orange solid;
	}
	th{
		width:120px;
		border:1px gray solid;
	}
	.jsonStyle{
		width:800px;
		text-align: left;
		word-break: break-all; /* 主要代码 */
	}
</style>

<body>
    <div style="text-align: center;">
        <table>
            <tr>
                <th>普通Json内容</th>
                <th>
                "json":"{\"data\":{\"adfadf\":\"\",\"resultMsg\":\"adfasdfsd\",\"sjjtyytte\":\"0.09\",\"dsfhyytrerwa\":\"0000000000\",\"adfasdfasdf\":\"0.09\",\"adfasdfsdf\":\"0.00\",\"adfadff\":\"202006302720182201124\",\"sdfasdfgdf\":\"2020063014271536571832\",\"sdfasdfgdffasdfdsaf\":\"20200630\",\"dfhyksfdhh\":\"142801\",\"gjkjtyyrtg\":\"OT0000\",\"errMsg\":\"\"}}","sdfasdfgdf":"","code":"0000","sjjtyytte":"","msg":"sccuess","dsfhyytrerwa":"0202006301428328627","dsfhyytrerwa":"aagxC6yV7KyiApaPw39RzbdVPUQCeI0e79uBl7rtdRPakprpDoWsfWEUi7tCp8OLTPGflQJy5ngTMbXeRW5MN5SceZOFG+88vZuWYPiwUyul4pc96Wtzd5kbrm0rGO9ZUzs8R+FSOmi/wy5PD6LcxUjO4u+Mlhj/CMZx5lhWA+7mWd/uUatYw5fSL4BAKRMcSq5aNySGlCwJb10+mYWU9HBxyWKOKzV9pfayU8bqSyw==","dsfhyytrerwa":""}
                </th>
            </tr>
        </table>

        <table>
            <tr>
                <th>格式Json内容</th>
                <th class="jsonStyle">
                "json":"{\"data\":{\"adfadf\":\"\",\"resultMsg\":\"adfasdfsd\",\"sjjtyytte\":\"0.09\",\"dsfhyytrerwa\":\"0000000000\",\"adfasdfasdf\":\"0.09\",\"adfasdfsdf\":\"0.00\",\"adfadff\":\"202006302720182201124\",\"sdfasdfgdf\":\"2020063014271536571832\",\"sdfasdfgdffasdfdsaf\":\"20200630\",\"dfhyksfdhh\":\"142801\",\"gjkjtyyrtg\":\"OT0000\",\"errMsg\":\"\"}}","sdfasdfgdf":"","code":"0000","sjjtyytte":"","msg":"sccuess","dsfhyytrerwa":"0202006301428328627","dsfhyytrerwa":"aagxC6yV7KyiApaPw39RzbdVPUQCeI0e79uBl7rtdRPakprpDoWsfWEUi7tCp8OLTPGflQJy5ngTMbXeRW5MN5SceZOFG+88vZuWYPiwUyul4pc96Wtzd5kbrm0rGO9ZUzs8R+FSOmi/wy5PD6LcxUjO4u+Mlhj/CMZx5lhWA+7mWd/uUatYw5fSL4BAKRMcSq5aNySGlCwJb10+mYWU9HBxyWKOKzV9pfayU8bqSyw==","dsfhyytrerwa":""}
                </th>
            </tr>
        </table>
    </div>
</body>
</html>
posted @ 2020-06-30 15:53  踏步  阅读(1629)  评论(0)  编辑  收藏  举报