html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<link rel="stylesheet" type="text/css" href="css/whiteSpace.css">
</head>
<body>
<div class="container">
<div class="left"> <span> 2223333333333333333333333333333333333333333333333333333333333333333333333333333333333
</span> </div>
<div class="right">
<span>222222222222222222222222222222222</span>
</div>
</div> <div style="clear:both"></div>
<div class="main">
<div class="myLft"> 123
</div>
<div class="myRgt"> 456
</div>
</div>
</body>
</html>
css
/*
*空白字符
*/
body{
margin:0;
padding:0;
} /*行内元素*/
.right ,
.left{
margin:0;
padding:0;
display: inline-block;
width:50%;
height: 100px;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
line-height:0;
font-size:15px;
vertical-align:text-top; } .left{
background-color: #428bca;
} .left span ,.right span{
line-height:1.28;
} .right{
background-color:#F00;
} .container{
width:100%;
/*white-space: nowrap;*/
font-size:0;
} /*.left span{
white-space:pre-line;
}*/ /*浮动元素*/
.main{
width:100%;
margin:100px 0;
padding:0;
height:100px;
} .myLft,.myRgt{
float:left;
width:50%;
height:100px;
} .myLft{
background-color:#428bca;
} .myRgt{
background-color:#f00;
} .main:before,.main:after{
display:table;
height:0;
content:'';
clear:both;
}
效果图
