css中溢出的处理

1.溢出

　　 当一个盒子的内容（子元素、孙子元素等后裔）超过盒子本身的大小的时候，就会出现溢出。

2.overflow

　　通常用overflow(overflow-x,overflow-y)来处理内容溢出。

　　overflow: hidden; 超出盒子的内容被隐藏。

　　overflow:auto;当内容超出盒子的容纳范围时会出现滚动条,但是当文字没有超出盒子的容纳范围时会不会出现滚动条

3.overflow: hidden处理溢出时的文本特殊处理

　　实际工作中通常是会碰到要求文本超出文末用省略号显示，保留一行或者多行：

　　 超出一行隐藏，以省略号结束

?

1 2 3 4

text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

　　 超出多行隐藏，以省略号结束

?

1 2 3 4 5 6 7

text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;