关于CSS中的自动换行和强制不换行

自定换行：

div{  
word-wrap: break-word;  
word-break: normal;  
}
原始效果图展示：

这是网站上很常见的分享卡片，但是“。。。”并没有换行，这时候，我们就需要给div的样式设置为自定义换行，也就是word-wrap: break-word;  word-break: normal;
修改后效果图展示：

修改后“。。。”就可以竖向显示了。

《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《

强制不换行：

div{  
white-space:nowrap; 

}

代码展示：

<div id="pic">
                <ul>
                    <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                    <li><img src="http://192.168.1.103/hibeans/web/images/temporary/imgget1.jpg" /></li>
                    <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                    <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                    <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                    <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                    <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                    <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                    <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                    <li><img src="http://192.168.1.103/hibeans/web/images/temporary/car_t1.jpg" /></li>
                 </ul>
            </div>

定义了强制不换行后超出可视区域的部分将在页面中自定显示滚动条，不换行。