Переполнение содержимого — Изучение веб-разработки
- Назад
- Обзор: Building blocks
- Далее
В этом уроке мы рассмотрим другую важную концепцию в CSS — переполнение. Переполнение это то, что случается когда слишком много контента содержится внутри блока. В этом гайде вы изучите что это и как этим управлять.
| Необходимые условия: | Базовая компьютерная грамотность, Установка базового ПО, базовые знания работы с файлами, основы HTML (Введение в HTML), и общее представление о том, как работает CSS (study Введение в CSS.) |
|---|---|
| Цель: | Понять, что такое переполнение и как с ним работать. |
Мы уже знаем, что всё в CSS — блоки, и что мы можем ограничивать размер этих блоков, присваивая им определённое значение посредством width и height (или inline-size и block-size).
Переполнение — это то, что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный размер. CSS даёт нам различные инструменты для управления переполнением, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с переполнением достаточно часто, когда пишите CSS, особенно когда глубже погрузитесь в CSS раскладку.
Рассмотрим два примера, демонстрирующих поведение CSS по умолчанию при возникновении переполнения.
Первый пример — это блок, который был ограничен установленным параметром height. Затем мы добавили контент, превышающий выделенное пространство. Контент вышел за пределы поля и попал в абзац ниже.
Второй пример — слово в блоке. Блок оказался слишком маленьким для этого слова, и поэтому оно выходит за его пределы.
Вы можете задаться вопросом, почему CSS работает так неаккуратно, отображая контент за пределами предназначенного для него блока. Почему бы не скрывать выходящий за пределы контент? Почему бы не масштабировать размер блока, чтобы он соответствовал размеру содержимого?
По возможности, CSS не скрывает контент, потому что это может привести к потере данных.
Проблема состоит в том, что вы можете не заметить исчезновение данных. Посетители сайта тоже могут не заметить этого. Если кнопка отправки формы исчезнет и никто не может заполнить форму, это может стать большой проблемой! Поэтому, вместо того, чтобы скрывать выходящий за границы блока контент, CSS явно его отображает. Так вы с большей вероятностью увидите проблему при разработке. В худшем случае это заметит посетитель сайта и сообщит вам об этом.
Если вы ограничиваете поле с помощью параметров width или height, CSS доверяет вам и считает, что вы знаете, что делаете. CSS предполагает, что вы управляете ситуацией и предусматриваете возможность возникновения переполнения. В общем случае, ограничение размера блока проблематично, если он содержит текст. В этом месте может быть больше текста, чем вы ожидали или его размер может быть больше (например, если пользователь увеличил размер шрифта).
В следующих двух уроках объясняются различные подходы управления размерами, которые позволяют уменьшить вероятность возникновения переполнения.
Однако, если вам нужен фиксированный размер блока, вы также можете контролировать поведение переполнения.
Свойство overflow позволяет взять под контроль переполнение элемента и подсказать браузеру, как он должен себя вести. Значение overflow по умолчанию – visible, что означает — «показывать контент, когда он выходит за границы блока».
Чтобы обрезать контент выходящий за пределы блока, вы можете установить overflow: hidden. Это свойство делает именно то, о чём говорит: скрывает выходящий за пределы контент. Помните, что это может сделать часть содержимого невидимым. Используйте данное значение только в том случае, если скрытие содержимого не вызовет проблем.
Возможно, что при возникновении переполнения вместо скрытия вы захотите отобразить полосы прокрутки. При использовании overflow: scroll браузеры с видимыми полосами прокрутки всегда будут отображать их, даже если содержимого недостаточно для возникновения перекрытия.
Это позволяет сохранить целостность раскладки, так как полосы прокрутки не будут появляться и пропадать в зависимости от количества содержимого в контейнере.
Удалите часть содержимого из поля ниже. Обратите внимание, что полосы прокрутки остаются, даже если прокрутка не требуется.
В приведённом выше примере нам нужно прокручивать содержимое только по оси overflow-y (en-US), которое позволяет прокручивать содержимое только по оси y.
Вы также можете установить прокрутку по оси x с помощью overflow-x (en-US), но это не рекомендуемый способ отображения длинных слов! Если у вас есть длинное слово в маленьком поле, вы можете использовать свойства word-break или overflow-wrap. Кроме того, некоторые методы, описанные в разделе Изменение размеров в CSS, могут помочь вам создавать блоки, которые лучше масштабируются с различным объемом содержимого.
Как и в случае со scroll, вы получаете полосу прокрутки независимо от того, достаточно ли содержимого для её появления.
Примечание: вы можете точно задать прокрутку по осям x и y, используя свойство overflow, передав два значения. Первое значение будет относиться к overflow-x, а второе — к overflow-y. Если передать одно значение, то overflow-x и overflow-y получат одинаковые значения. Например, overflow: scroll hidden устанавливает overflow-x в scroll и overflow-y в hidden.
Если вы хотите, чтобы полосы прокрутки отображались только тогда, когда содержимого больше, чем может поместиться в поле, используйте overflow: auto. Это позволяет браузеру автоматически определять, следует ли отображать полосы прокрутки.
В приведённом ниже примере уменьшите количество содержимого так, чтобы оно поместилось в поле.
Вы должны увидеть, что полосы прокрутки исчезнут.
Когда вы используете значение overflow, такое как scroll или auto, вы создаете контекст форматирования блока (BFC). Содержимое блока, для которого вы установили параметр overflow приобретает автономную раскладку. Контент вне блока не может проникнуть в блок, и ничто не может вылезти из этого блока в окружающее его пространство. Это дает возможность прокручивать содержимое, так чтобы оно не выходило за пределы блока.
Современные методы раскладки (описанные в разделе CSS раскладка) справляются с переполнением очень хорошо вне зависимости от того, сколько контента будет на веб-странице.
Это не всегда было нормой. В прошлом некоторые сайты были построены с блоками фиксированной высоты для выравнивания нижних границ блоков. Тем не менее эти блоки могли не иметь ничего общего между собой. Это была хрупкая конструкция. В устаревших приложениях вы можете встретить блок, в котором содержимое перекрывает другое содержимое на странице.
При разработке сайта всегда помните о переполнении. Тестируйте дизайны как с большим, так и с малым количеством контента. Проверяйте различные размеры шрифта текстов. Убедитесь, что ваш CSS работает надёжно. Изменение значения overflow для скрытия содержимого или добавления полос прокрутки, должно использоваться только при необходимости (например там, где вы хотите использовать прокручиваемый блок).
В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше – см. Проверь свои навыки: переполнение (en-US).
В этом уроке была представлена концепция переполнения. Важно понимать, что CSS по умолчанию старается избежать обрезания выходящего за границы блока содержимого.
- Назад
- Обзор: Building blocks
- Далее
- Каскад и наследование
- Селекторы CSS
- Селекторы типа, класса и ID
- Селекторы атрибута
- Псевдоклассы и псевдоэлементы
- Комбинаторы
- Блочная модель(The box model)
- Фон и границы
- Обработка разных направлений текста
- Переполнение содержимого
- Значения и единицы измерения
- Размеры в CSS
- Элементы изображений, форм и медиа-элементы
- Стилизация таблиц
- Отладка CSS
- Организация вашей CSS
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Want to get more involved?
Learn how to contribute.
This page was last modified on by MDN contributors.
Что может поломать макет на гридах (CSS Grid Layout) — CSS-LIVE
Перевод статьи BREAKING THE GRID с сайта daverupert.com для CSS-live.ru, автор — Дейв Руперт
Два способа поломать CSS-гриды, и как их починить
Как фронтенд-разработчика, меня ничто так не раздражает, как неожиданное появление горизонтального скроллбара на сайте. Однако, выстраивая раскладку страницы заказа с помощью CSS-гридов, я на удивление обнаружил что-то мистическое, что поломало мой контейнер. Я полагал, что с размерами у гридов всё решается автоматически.
В итоге я нашёл два способа поломать CSS-гриды. Как это бывает, я умудрился в одной раскладке сделать и то, и другое.
№1: Элементы с
overflow-x поломают гридДля нашего магазина использовался паттерн подменю, которое могло бы прокручиваться с помощью overflow-x, чтобы показать больше вариантов оплаты.
Даже с примененным overflow-x грид-элемент растягивался до scrollWidth подменю. Оказывается, любой элемент с overflow-x, будь то блок <code> или адаптивная таблица, поломали бы грид. Вот наглядный пример.
See the Pen Overflow-x Elements Inside CSS Grid (bug? behavior?) by Максим (@psywalker) on CodePen.
Обычно с решением проблемы горизонтального переполнения справляется overflow: hidden, чтобы заставить раскладку подчиняться. Тоже нет.
Дело в том, что по умолчанию у грид-элементов стоит min-width: auto и их размер автоматически устанавливается по контенту в них. Оно устанавливает их min-width по ширине переполняющего блока.
Поэтому для исправления глубоко вложенного переполняющего дочернего элемента вы, вопреки интуиции, не обращаете внимания на родительский элемент, а идете вверх по DOM-дереву до самого грид-элемента и обнуляете ему min-width.
.grid > * { min-width: 0; }
Благодаря этому размеры грид-элемента с переполнением контента установятся правильно. Но не всегда.
№2: Контролы формы поломают грид
В нашей раскладке тоже использовался грид для размещения полей формы бок о бок. Я создал тестовый пример на CodePen с различными типами полей, чтобы изолировать эту проблему. При уменьшении окна браузера до момента появления горизонтального скролла (~380px) можно видеть, как поля выходят за границы грид-полосы.
See the Pen CSS Grid PRBLMZ by Максим (@psywalker) on CodePen.
В итоге, чтобы пофиксить подобные поля, придётся применить max-width: 100%, и хотя это в основном исправляет такое поведение в Chrome и Safari, некоторые элементы в этих браузерах и все подобные элементы в Firefox и Edge по-прежнему вываливаются за грид-полосу.
Потому что элементы <input> и им подобные (<img>, <progress>, <select>, <video>) обладают потенциальной способностью быть чем-то, называемым «Замещаемыми элементами»
Что ещё, чёрт возьми, за «Замещаемые элементы»?
Согласно MDN, замещаемый элемент — элемент, представление которого выходит за рамки CSS. Это ситуация, когда браузер получает разметку и внедряет элемент с чем-то вроде Shadow DOM. <video> — подходящий пример, но большинство контролов формы также попадают под это описание.
Замещаемые элементы существуют на какой-то спецификационной ничейной территории.
Правила их оформления и отображения четко не определены, только лишь то, что у них «часто есть внутренние размеры». Поэтому каждый браузер по своему трактует внешний вид по умолчанию определённых элементов и использование замещаемых элементов в целом. На скриншоте ниже видно, как в зависимости от браузера выглядят замещаемые элементы и их размеры.
В нашей ситуации у некоторых элементов input есть фантомные «внутренние размеры», применяемые браузером. Они не отображаются в качестве браузерного стиля, ни во вкладке «Стили», ни в «Вычисленные стили», но их min-width около ~180px для стандартного <input type="text">.
Чтобы кроссбраузерно пофиксить «вываливание» элементов за границы грид-полосы, придётся переопределить этот внутренний размер замещаемых элементов.
/* Применяем max-width для замещаемых элементов и контролов формы. */
img, video, audio, canvas, input,
select, button, progress { max-width: 100%; }
/* Заставляем поля с типом file и submit переносить текст */
input[type="file"],
input[type="submit"] { white-space: pre-wrap; }
/* Чиним прогрессбар и поле-ползунок */
progress,
input[type="range"] { width: 100%; }
/* Фиксим поля с типом Number в Firefox */
@supports (--moz-appearance: none) {
input[type="number"] { width: 100%; }
}
Здесь есть побочный эффект, когда прогрессбар, и поля range и number теперь всегда занимают 100% грид-полосы.
Это можно переопределить и настроить.
Можно ли назвать это багами гридов? Не совсем.
Такое поведение, как указал некто на StackOverflow, соответствует спецификации. Гриды перенимают поведение флексбоксов относительно min-width: auto, а у замещаемых элементов их min-width зависит от внутренних размеров. Так что само по себе это не баг.
Тем не менее, почти для каждой из моих раскладок мне приходилось применять вспомогательный класс к капризным грид-элементам. Чтобы у него было запоминающееся фирменное название, я назвал его «Fit Grid» (по-русски можно передать как «Влит-в-грид» — прим. перев.).
/* _______ ___ _______ _______ ______ ___ ______ | || | | | | || _ | | | | | | ___|| | |_ _| | ___|| | || | | | _ | | |___ | | | | | | __ | |_||_ | | | | | | | ___|| | | | | || || __ || | | |_| | | | | | | | | |_| || | | || | | | |___| |___| |___| |_______||___| |_||___| |______| Дейв Руперт Читайте ещё: https://daverupert.com/2017/09/breaking-the-grid/ */ /* * Удаляем `min-width: auto` из элементов грида. * Чиним элементы с overflow-x. */ .fit-grid > * { min-width: 0; } /* Применяем max-width к замещаемым элементам и контролам формы */ .fit-grid img, .fit-grid video, .fit-grid audio, .fit-grid canvas, .fit-grid input, .fit-grid select, .fit-grid button, .fit-grid progress { max-width: 100%; } /* Заставляем поля с типом file и submit переносить текст */ .fit-grid input[type="file"], .fit-grid input[type="submit"] { white-space: pre-wrap; } /* Чиним прогрессбар и поле-ползунок */ .fit-grid progress, .fit-grid input[type="range"] { width: 100%; } /* Фиксим поля с типом Number в Firefox */ @supports (--moz-appearance: none) { .fit-grid input[type="number"] { width: 100%; } }
com/2017/09/breaking-the-grid/
*/
/*
* Удаляем `min-width: auto` из элементов грида.
* Чиним элементы с overflow-x.
*/
.fit-grid > * { min-width: 0; }
/* Применяем max-width к замещаемым элементам и контролам формы */
.fit-grid img,
.fit-grid video,
.fit-grid audio,
.fit-grid canvas,
.fit-grid input,
.fit-grid select,
.fit-grid button,
.fit-grid progress { max-width: 100%; }
/* Заставляем поля с типом file и submit переносить текст */
.fit-grid input[type="file"],
.fit-grid input[type="submit"] { white-space: pre-wrap; }
/* Чиним прогрессбар и поле-ползунок */
.fit-grid progress,
.fit-grid input[type="range"] { width: 100%; }
/* Фиксим поля с типом Number в Firefox */
@supports (--moz-appearance: none) {
.fit-grid input[type="number"] { width: 100%; }
}
Гриды для тяжелых раскладок не должны задумываться, что в них за контент, и должны выдерживать самые разные сценарии.
Было бы неплохо внедрить это в каждый проект, чтобы сделать грид-элементы максимально устойчивыми. Пусть это и не баг, но я отношу это к территории «Clearfix 2.0».
Как по мне, так замещаемые элементы всегда должны подчиняться и вмещаться в грид-полосы. Я был бы рад, если бы браузеры сошлись на этом. Единственный вопрос, который крутится в моей голове, это должны ли контролы формы, такие как прогрессбар, ползунок и числовые занимать всю грид-полосу. Решение — input, select { width: 100% }, но нутром чую, что не все этого захотят.
Если у вас есть улучшения, дайте мне знать, и я опубликую их на GitHub, но, пожалуйста, перед требованием исправить что-то, всё же проверяйте это в каждом браузере. Спасибо, d00dz.
Спасибо Грегу Уитворту из Microsoft Edge за помощь в отладке и лучшем понимании замещаемых элементов.
P.S. Это тоже может быть интересно:
html — CSS Как сделать отображение изображения за пределами div
спросил
Изменено 9 лет, 7 месяцев назад
Просмотрено 27 тысяч раз
У меня есть изображение, которое я хотел бы расширить за пределы div и отобразить за пределами отображаемой границы.
Каждый раз, когда я пытаюсь переместить его, верхняя часть изображения просто обрезается. (См. изображение электронной книги вверху 2-го столбца…)
Мы очень признательны за любую помощь. Спасибо
- css
- html
- вырезать
2
Попробуйте добавить правило CSS:
.entry-content {
переполнение: видимое;
}
В настоящее время для свойства установлено значение hidden , которое, как следует из названия, скрывает все содержимое, выходящее за его пределы. Установка на visible позволяет отображать содержимое.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
3
<дел>
Приведенный выше код можно найти с помощью отладчика Chrome. Это контейнер для ваших блоков содержимого, включая это изображение.
В настоящее время для класса entry-content установлено значение overflow:hidden .
Обновите это до overflow:visible или удалите .entry-content класс из этого div.
0
Дайте вашему изображению поле: 10px. Это поможет.
Попробуйте эту строку:
Измените поле : -30px 13px 0px 0px;
до
поле: 15px 13px 0px 0px;
0
изменение в файле «http://yoursite.com/wp-content/uploads/prose/minified.css» в строке 2 из
.entry-content {
переполнение: скрыто;
}
до
.entry-content {
переполнение: видимое;
}
или добавьте это правило в любой файл css
.entry-content {
переполнение: видимо !важно;
}
Зарегистрируйтесь или войдите
Зарегистрироваться через Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
html — вывод изображения из div
спросил
Изменено 7 лет, 2 месяца назад
Просмотрено 34к раз
Я пытаюсь получить изображение, вытекающее из div.
По сути, в моем заголовке у меня есть фиксированная ширина 960 пикселей, изображение логотипа имеет что-то от него, что я хотел бы разместить за пределами этих 960 пикселей.
Есть хороший чистый метод достижения этого?
- HTML
- CSS
1
Простой способ сделать это (который работает в большинстве браузеров) заключается в том, что вы делаете свою основную оболочку position:relative , а div (который вы хотите вывести наружу) имеет position: absolute; слева: -25px; верх: -25px; .
Наличие позиции : относительная , так как обертка делает позиция: абсолютная относительная внутри родительского контейнера.
1
поместите свой логотип в фиксированный div и придайте этому div стиль overflow:hidden
Вы также можете использовать абсолютное позиционирование для достижения этой цели.
Краткий пример ниже:
http://jsfiddle.net/spacebeers/9QJ4w/1/
Для этого можно использовать свойство CSS position :
HTML:
Некоторый контент
CSS:
раздел
{
ширина: 100%;
высота: 175 пикселей;
}
делитель р
{
ширина: 960 пикселей;
поле: 0 авто;
цвет фона: #333;
высота: 175 пикселей;
отступ текста: 20px;
}
div изображение
{
положение: родственник;
справа: 140 пикселей;
}
http://jsfiddle.net/FpTDc/
Ваш друг будет overflow:visible.
Ваш содержащий div будет иметь ширину 960 пикселей с переполнением: видимым. Внутри у вас будет относительно или абсолютно позиционированное изображение (вам нужно будет сместить «влево», чтобы отцентрировать его)
<дел>
![]()
: http://jsfiddle.