Обробка Переповнення Вмісту в CSS
Розглянемо, як можна керувати переповненням вмісту за допомогою однієї властивості. Іноді трапляється, що для елемента задано фіксовані width та height. Однак внутрішній вміст значно перевищує доступний простір. Властивість overflow визначає поведінку вмісту елемента, коли він перевищує явно встановлені значення height або width для цього елемента.
overflow: visible | scroll | hidden | auto
visible— значення за замовчуванням. Вміст виходить за межі елемента та залишається видимим;scroll— вміст виходить за межі елемента, і з'являється смуга прокрутки, яка дозволяє користувачу прокручувати як вертикально, так і горизонтально;hidden— вміст, що виходить за межі елемента, обрізається та не відображається;auto— працює так само, як іscroll. Однак смуги прокрутки з'являються лише тоді, коли вміст виходить за межі елемента.
Примітка
Переповнений вміст не впливає на геометрію інших елементів.
visible
Якщо властивість overflow не задана, її значенням за замовчуванням є visible. Це означає, що вміст буде відображатися за межами кордонів елемента. У прикладі межі блоку виділені кольором darkblue, а для блоку встановлені фіксовані властивості width та height.
index.html
index.css
scroll
Можна переглянути весь вміст елемента за допомогою прокрутки. Розглянемо приклад:
index.html
index.css
hidden
Увесь вміст, що виходить за межі, буде приховано, і користувач ніколи його не побачить. Зазвичай це корисно лише тоді, коли потрібно створити декоративні ефекти.
index.html
index.css
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you show examples of how each overflow value looks in practice?
What are some common use cases for each overflow property?
How does overflow interact with other CSS properties like position or display?
Awesome!
Completion rate improved to 2.04Обробка Переповнення Вмісту в CSS
Свайпніть щоб показати меню
Розглянемо, як можна керувати переповненням вмісту за допомогою однієї властивості. Іноді трапляється, що для елемента задано фіксовані width та height. Однак внутрішній вміст значно перевищує доступний простір. Властивість overflow визначає поведінку вмісту елемента, коли він перевищує явно встановлені значення height або width для цього елемента.
overflow: visible | scroll | hidden | auto
visible— значення за замовчуванням. Вміст виходить за межі елемента та залишається видимим;scroll— вміст виходить за межі елемента, і з'являється смуга прокрутки, яка дозволяє користувачу прокручувати як вертикально, так і горизонтально;hidden— вміст, що виходить за межі елемента, обрізається та не відображається;auto— працює так само, як іscroll. Однак смуги прокрутки з'являються лише тоді, коли вміст виходить за межі елемента.
Примітка
Переповнений вміст не впливає на геометрію інших елементів.
visible
Якщо властивість overflow не задана, її значенням за замовчуванням є visible. Це означає, що вміст буде відображатися за межами кордонів елемента. У прикладі межі блоку виділені кольором darkblue, а для блоку встановлені фіксовані властивості width та height.
index.html
index.css
scroll
Можна переглянути весь вміст елемента за допомогою прокрутки. Розглянемо приклад:
index.html
index.css
hidden
Увесь вміст, що виходить за межі, буде приховано, і користувач ніколи його не побачить. Зазвичай це корисно лише тоді, коли потрібно створити декоративні ефекти.
index.html
index.css
Дякуємо за ваш відгук!
