css中溢出的处理
1.溢出
当一个盒子的内容(子元素、孙子元素等后裔)超过盒子本身的大小的时候,就会出现溢出。
2.overflow
通常用overflow(overflow-x,overflow-y)来处理内容溢出。
overflow: hidden; 超出盒子的内容被隐藏。
overflow:auto;当内容超出盒子的容纳范围时会出现滚动条,但是当文字没有超出盒子的容纳范围时会不会出现滚动条
3.overflow: hidden处理溢出时的文本特殊处理
实际工作中通常是会碰到要求文本超出文末用省略号显示,保留一行或者多行:
超出一行隐藏,以省略号结束
text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
超出多行隐藏,以省略号结束
text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;