关于文字换行的问题，请教下

<ul class="mui-table-view mui-grid-view">  
    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
        <a href="#">  
            <img class="mui-media-object" src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg">  
            <div class="mui-media-body">幸福就是可以一起睡觉</div>  
        </a>  
    </li>  
    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
        <a href="#">  
            <img class="mui-media-object" src="http://dcloudio.github.io/mui/assets/img/muwu.jpg">  
            <div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>  
        </a>  
    </li>  
    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
        <a href="#">  
            <img class="mui-media-object" src="http://dcloudio.github.io/mui/assets/img/cbd.jpg">  
            <div class="mui-media-body">Color of SIP CBD</div>  
        </a>  
    </li>  
    <li class="mui-table-view-cell mui-media mui-col-xs-6">  
        <a href="#">  
            <img class="mui-media-object" src="http://dcloudio.github.io/mui/assets/img/yuantiao.jpg">  
            <div class="mui-media-body">静静看这世界</div>  
        </a>  
    </li>  
</ul>

这个官方例子中的<div class="mui-media-body">幸福就是可以一起睡觉</div>文字如何做到字特别长的时候 自动折到下行 显示，不要隐藏，怎么都调不好。