在頁面中，如果添加內(nèi)容過多超出了容器會(huì)顯得很不美觀，接下來我教大家如何解決：
單行文字超出顯示省略號(hào)：
html代碼：<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/p>
css樣式表：
p{
width: 50px;/*必須設(shè)置寬度*/
overflow: hidden;/*溢出隱藏*/
text-overflow: ellipsis;/*以省略號(hào)...顯示*/
white-space: nowrap;/*強(qiáng)制不換行*/
}
多行文本超出顯示省略號(hào)：
<style>
p{
width: 200px;/*必須設(shè)置寬度*/
word-break: break-all;
text-overflow: ellipsis;/*以省略號(hào)...顯示*/
display: -webkit-box;/**對(duì)象作為伸縮盒子模型顯示**/
-webkit-box-orient: vertical;/**設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式**/
-webkit-line-clamp: 3;/**顯示的行數(shù)**/
overflow: hidden;/**隱藏超出的內(nèi)容**/
}
</style>
<body>
<div>
<p>
word-break屬性規(guī)定自動(dòng)換行的處理方法。normal(使用瀏覽器默認(rèn)的換行規(guī)則),break-all(允許在單詞內(nèi)換行),keep-all(只能在半角空格或連字符處換行。)
</p>
</div>
</body>
</html>
保存文檔為html文件，代碼中加了注釋的部分是實(shí)現(xiàn)多行文本省略的關(guān)鍵屬性。這個(gè)方法不兼容ie，overflow:hidden在ie6、ie7無效不能隱藏;
