css中溢出的处理

时间:2021-10-11
本文章向大家介绍css中溢出的处理,主要包括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;

  

原文地址:https://www.cnblogs.com/foxing/p/15393951.html