CSS | Переполнение
Опубликовано: 1 Марта, 2022
Переполнение CSS контролирует большой контент. Он сообщает, нужно ли обрезать контент или добавлять полосы прокрутки. Перелив содержит следующее свойство:
- видимый
- скрытый
- прокрутка
- авто
Visible: The content is not clipped and visible outside the element box.
Example:
<!DOCTYPE><html> <head> <style> p { width:100px; height:80px; border:1px solid; overflow:visible; } </style> </head> <body> <h2> GEEKSFORGEEKS </h2> <p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. </p> </body></html> |
Выход:
Скрытый: переполнение обрезается, а остальное содержимое невидимо.
Пример:
Выход:
Scroll: The overflow is clipped but a scrollbar is added to see the rest of the content. The scrollbar can be horizontal or vertical.
Example:
<!DOCTYPE><html> <head> <style> p { width:120px; height:100px; border:1px solid; overflow:scroll; } </style> </head> <body> <h2> GEEKSFORGEEKS </h2> <p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. </p> </body></html> |
Выход:
Авто: автоматически добавляет полосу прокрутки всякий раз, когда это необходимо.
Example:
<!DOCTYPE><html> <head> <style> p { width:120px; height:100px; border:1px solid; overflow:auto; } </style> </head> <body> <h2> GEEKSFORGEEKS </h2> <p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. </p> </body></html> |
Выход:
Overflow-x and Overflow-y: This property specifies how to change the overflow of elements. x deals with horizontal edges and y deals with vertical edges.
Example:
<!DOCTYPE><html> <head> <style> p { width:120px; height:100px; border:1px solid; overflow-x:scroll; overflow-y:hidden; } </style> </head> <body> <h2> GEEKSFORGEEKS </h2> <p> The CSS overflow controls big content. It tells whether to clip content or to add scroll bars. </p> </body></html> |
Выход:
