老师这个是什么原理呢， 为什么 wrap 的文字只显示一行呢。

<style>
.center{
         width: 100%;
         background: red;
     }
     .wrap{
        margin: 0 200px;
     }

     .left{
           width: 200px;
           background: brown;
           margin-left: -100%;
     }
     .right{
           width: 200px;
           background: burlywood;
           margin-left: -200px;
     }
     .column{float: left;}
    .box{overflow: hidden;}
</style>

<div class="box">
       <div class="center column">
           <div class="wrap">121212112121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121212211212121221121212121221121212121221121212121221121212121221121212121221121212121221121212121221121212121221121212121221121212121212211212121212211212121212211212121212211212121212211212121212211222112121212122112121212122112121212122112121212122112</div>
       </div>
       <div class="left column">this is left</div>
       <div class="right column">this is right</div>
   </div>