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