在页面中，如果添加内容过多超出了容器会显得很不美观，接下来我教大家如何解决：
单行文字超出显示省略号：
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;/**显示的行数**/
overflow: hidden;/**隐藏超出的内容**/
}
</style>
<body>
<div>
<p>
word-break属性规定自动换行的处理方法。normal(使用浏览器默认的换行规则),break-all(允许在单词内换行),keep-all(只能在半角空格或连字符处换行。)
</p>
</div>
</body>
</html>
保存文档为html文件，代码中加了注释的部分是实现多行文本省略的关键属性。这个方法不兼容ie，overflow:hidden在ie6、ie7无效不能隐藏;
