Как исправить выход блока за пределы родительского?
Есть блок, который сделан по виду как тень для кнопки, но он выходит за пределы самого большого блока. Подскажите пожалуйста, как это исправить? Верстка:
div#login < display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; height: 100%; background: #b8c783; >div#form < margin-top: 50px; >p#easy_chat < font-size: 70px; font-family: 'Pacifico'; color: #fffecd; >div#register < padding-bottom: 35px; >p.name_password < font-family: 'Montserrat'; color: #635960; >input.login < width: 300px; height: 30px; background: #fffecd; border: none; font-family: 'Montserrat'; color: #635960; font-size: 17px; padding-left: 10px; >div#shadow < width: 312px; height: 200px; background: linear-gradient(-5deg, #b8c783, rgba(0, 0, 0, 0.06)); transform: matrix(1, -0.13, 0.5, 1.2, 50, 0); >input#submit
Easy Chat
Enter your name
Enter your pasword
Переполнение — Основы верстки контента
Переполнение контента внутри блока — распространенное явление при верстке контента. Переполнением считается ситуация, при которой контент внутри контейнера больше, чем размер самого контейнера. Распространенный случай такого поведения — использование контейнера с фиксированными значениями высоты и ширины.
Интересно: использование фиксированных значений высоты и ширины в большинстве случаев не является хорошей практикой. Так можно достаточно быстро сверстать блок по макету, но одновременно с этим отнимается возможность расширения функционала. Любой отход от изначального контента может привести к проблемам, связанным с выходом контента из контейнера. Используйте фиксированные значения высоты и ширины там, где это предполагается в дизайне или для создания специфичной функциональности.
В качестве примера создадим блок с фиксированными значениями высоты и ширины. Внутри такого контейнера расположим текст так, чтобы он вышел за границы блока.
Профессия «Верстальщик» Создает страницы с помощью HTML и CSS. Умеет полностью пользоваться возможностями модулей Flex и Grid. Использует препроцессор SASS, шаблонизатор Pug и собирает проекты с помощью Gulp. Следит за доступностью сайта создавая семантически правильную разметку. Создает компоненты и утилиты на Bootstrap. Верстает адаптивные проекты.
section box-sizing: border-box; width: 500px; height: 300px; padding: 20px; color: #fff; font: 22px/1.5 sans-serif; background: #1d3e53; > h1 font-size: 2em; >
Большая часть описания профессии вышла за пределы блока. Браузеры в данном случае считают контент важнее, чем контейнер, в котором он лежит, и не скрывают текст. Это не лишено смысла, ведь главная часть любой страницы — ее контент. Без него вся страница не будет иметь никакого смысла.
Такая ситуация называется переполнением, и CSS позволяет управлять им. Для этого существует три свойства:
- overflow-x — управление переполнением по горизонтали.
- overflow-y — управление переполнением по вертикали.
- overflow — сокращенная запись двух предыдущих свойств. Если указать внутри только одно значение, то оно применится к двум осям одновременно. Наиболее распространенный вариант использования.
По умолчанию свойство имеет значение visible , которое и указывает на то, что при переполнении контент должен отрисовываться вне своего родителя. В противовес visible есть значение hidden . Его задача обратна — скрыть контент, который выходит за пределы своего родителя. При этом доступ к такому контенту теряется. При использовании свойства overflow важно помнить, что это свойство не является наследуемым, поэтому его необходимо указывать у каждого блока, с которым происходит переполнение. В дальнейшем вы увидите примеры таких реализаций.
Распространенная ситуация при верстке блоков, которые должны находиться в HTML, но при этом быть временно скрытыми. Например, при создании слайдеров, в которых все неактивные слайды находятся за пределами блока и скрыты с помощью свойства overflow .
Хоть теперь верстка не «сломалась» от переполнения, но прочитать описание профессии невозможно. Не хватает какой-нибудь полосы прокрутки внутри блока. Свойство overflow позволяет добавить полосу прокрутки в такой блок. Для этого может использоваться два значения:
В чем разница между ними? Посмотрим на примере, взяв вначале значение scroll . Установим для секции новое значение свойства overflow .
Теперь мы можем прокрутить контент внутри блока и наконец прочитать описание всей профессии. Но прокрутка появилась не только по вертикали, но и по горизонтали. При этом она недоступна, так как в этом направлении нет переполнения контента. Во-первых, это «портит» дизайн, а во-вторых отнимает место внутри блока. Если такое поведение явно не обозначено в макете, то стоит добавить полосу прокрутки только для того направления, где возникает переполнение контента. Это возможно с помощью значения auto . В этом случае браузер следит за тем, где возникло переполнение и добавляет полосу прокрутки именно для этого направления.
Важно: используйте свойство overflow с осторожностью. Велик соблазн использовать его в случае быстрой верстки, когда при выходе макета за пределы экрана выставляют следующий CSS код:
body overflow-x: hidden; >
Это действительно решит проблему с горизонтальной прокруткой, но может и обрезать важную часть контента. Потратьте чуть больше времени, но локализуйте проблему и решите именно ее. Это сделает вашу верстку понятнее и проще.
Переполнение текста
Не всегда требуется работать с переполнением только в рамках свойства overflow. Бывают ситуации, когда нужно точечно работать с переполнением контента, а не со всем блоком сразу. В качестве примера используем верстку превью сообщения чата.
Перед продолжением изучите верстку этого примера. Вы можете обнаружить пару новых свойств, которые относятся к модулю CSS Flexible Box Layout. С этим модулем вы познакомитесь в курсе CSS: Flex.
Превью выглядит неплохо с текущим количеством текста, но если его станет больше, то вся верстка может развалиться.
Интересно: одна из задач хорошего верстальщика — предусмотреть различные варианты контента внутри блока. Попробуйте в полях, где ожидается имя, выставлять длинные последовательности. Среди дизайнеров хорошей практикой является тестирование макета на «Константине Константинопольском»
Увеличим количество контента внутри компонента с превью сообщения.
Не очень похоже на превью. Теперь это полноценное сообщение, которое отображается пользователю. Если таких сообщений будет десяток или сотня, то очень легко плюнуть на все и уйти с сайта, чем листать такое количество контента. В идеальной ситуации стоит отобразить только по одной строчке от имени и сообщения. Это можно сделать с помощью свойства white-space со значением nowrap . Такая конструкция запретит перенос текста по строкам внутри блока. Если ее добавить, то весь текст внутри блока с именем и блок с сообщением расположится в одну строку, что приведет к переполнению, но решит задачу. Ведь мы уже умеем работать с переполнением. Установим это свойство для селекторов .contact-name и .contact-message .
.contact-name font-weight: 700; white-space: nowrap; > .contact-message margin: 0; color: #d6d6d6; font-size: 80%; white-space: nowrap; >
Не очень красиво получилось. Стоит обрезать контент, который не помещается в рамки контейнера. Добавим свойство overflow-x для селекторов, к которым было добавлено правило white-space . Помимо этого, свойство необходимо добавить для всего контейнера, внутри которого и содержатся элементы с именем и сообщением
.contact-body padding: 1.5rem; overflow-x: hidden; > .contact-name overflow-x: hidden; font-weight: 700; white-space: nowrap; > .contact-message margin: 0; overflow-x: hidden; color: #d6d6d6; font-size: 80%; white-space: nowrap; >
Почему понадобилось столько свойств overflow ? Дело в отображении HTML. По своей сути браузер просто считывает верстку сверху вниз. Если взглянуть на этот компонент с точки зрения браузера, то получится следующая ситуация:
- Отрисовываем блок .contact-body и ограничиваем его по ширине.
- Отрисовываем блок .contact-name . Внутри него содержится длинный контент, который запрещено переносить согласно правилу white-space . Ширина блока больше, чем ширина родителя. По умолчанию отрисовываем контент за пределами контейнера.
- Повторяем действия из пункта 2 для блока .contact-message .
Добавляя в каждый из трех блоков свойство overflow браузер последовательно работает с переполнением контента. Если упустить свойство у блока .contact-body , то ширина блоков .contact-name и .contact-message не будет ограничена и использование overflow никак на них не повлияет.
Можно сказать, что верстка закончена, но сейчас отсутствуют отступы между участками текста по горизонтали. Например, имя пользователя и время сообщения почти слиплись. Можно добавить отступ, но есть и другой путь — работа с переполнением контента внутри строки.
Для указания браузеру, что нужно делать при переполнении контента внутри строки используется правило text-overflow . Оно может принимать всего два значения:
- clip — значение по умолчанию. Текст «режется» в том месте, где достиг края блока. Именно это поведение можно заметить в примере выше.
- ellipsis — вместо грубого среза строки добавляется многоточие. Это визуально показывает пользователю, что строка не закончена.
Добавим многоточие в блоки с именем пользователя и текстом сообщения.
Важно: для работы свойства text-overflow необходимо наличие свойства overflow со значением, отличным от visible .
.contact-name padding-right: 10px; /* добавим правый внутренний отступ для красоты */ overflow-x: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; > .contact-message margin: 0; overflow-x: hidden; color: #d6d6d6; font-size: 80%; white-space: nowrap; text-overflow: ellipsis; >
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Проблемы переполнения в CSS и способы их решения
В этой статье мы рассмотрим причины возникновения проблем с переполнением в CSS и способы их решения. Мы также рассмотрим, как современные инструменты разработчика могут облегчить процесс выявления этих проблем и отладки кода.
Если вы фронтэнд разработчик, то вы, возможно, уже сталкивались с проблемой появления нежелательной горизонтальной полосы прокрутки в различных элементах сайта, особенно при выводе его на мобильных устройствах. Поскольку существует множество причин возникновения подобной проблемы, простого ее решения не существует. Некоторые находятся и устраняются быстро, а некоторые требуют определенного навыка работы с инструментами отладки.
Что такое проблема переполнения?
Прежде чем обсуждать проблемы переполнения, необходимо выяснить, что это такое. Проблема переполнения (overflow) возникает, когда на веб-странице появляется нежелательная горизонтальная полоса прокрутки, позволяющая пользователю просматривать некий контент в горизонтальной плоскости. Возникновение подобного явления может обуславливаться самыми различными факторами.
Это может произойти из-за непредвиденно широкого содержимого или элемента фиксированной ширины, который шире окна просмотра. Мы рассмотрим все причины в этой статье.
Как выявить переполнение
Важная часть решения этой проблемы заключается в том, чтобы заметить ее в первую очередь. Если мы знаем, когда и где это происходит, мы можем сосредоточиться на изучении этой части веб-страницы. Существуют различные способы обнаружения переполнения: от прокрутки вручную влево или вправо или с помощью JavaScript.
Давайте рассмотрим способы выявления переполнения.
1. Прокрутка влево или вправо
Первый способ обнаружить проблему переполнения – попробовать прокрутить страницу по горизонтали. Если у вас это получилось, то это явное предупреждение о том, что со страницей что-то не так.
2. Использование JavaScript, чтобы найти элемент, который шире тела страницы
Можно добавить сниппет кода в консоль браузера, чтобы выявить любые элементы шире тела страницы. Это удобно для страниц с большим количеством элементов.
var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) < if (el.offsetWidth >docWidth) < console.log(el); >> );
3. CSS свойство outline
Применив CSS свойство outline ко всем элементам на странице, мы получим подсветку элементов, которые выходят за границы тела страницы.
Можно сделать даже лучше. Есть скрипт, придуманный Эдди Османи (Addy Osmani), который добавляет к каждому элементу свойство outline случайного цвета.
[].forEach.call($$("*"),function(a))
4. Пометка «OVERFLOW» в браузере Firefox
У браузера Firefox есть полезная функция, которая сигнализирует о том, что данный элемент испытывает проблему переполнения. Хочется надеяться, что другие браузеры тоже добавят такую функцию!
5. Удаление элементов веб-страницы
Еще один распространенный способ выявить проблемный элемент – это открыть инструмент разработчика браузера и начать удалять элементы один за другим. Как только переполнение исчезнет, то элемент, который вы только что удалили, скорее всего и содержит проблему. Этот метод может оказаться полезным в тех случаях, когда вы выявили проблему, но не знаете, с чем она связана.
Как только вы найдете, где происходит переполнение, вам будет легче сделать сокращенный тест для дальнейшей отладки.
Частые причины возникновения переполнения
Элементы фиксированной ширины
Одной из наиболее распространенных причин переполнения являются элементы фиксированной ширины. Строго говоря, не следует задавать фиксированную ширину тем элементам, которые должны отображаться в условиях изменяющегося размера окна просмотра.
.element < /* Не делайте так */ width: 400px; >
Использование flexbox без переноса
Как бы не был полезен flexbox, тем не менее, стремление предотвратить переход элементов на новую строку, когда для них недостаточно места, чревато неприятностями.
.parent
Здесь флекс элементы могут вызвать горизонтальное переполнение, если для них будет мало места для размещения в одной строке:
Обязательно используйте свойство flex-wrap: wrap , если предполагается, что флекс элемент будет отображаться в окне просмотра с изменяющимся размером.
.parent < display: flex; /* Делайте так */ flex-wrap: wrap; >
CSS Grid
Когда вы используете разметку CSS Grid, то очень важно учитывать адаптивность макета. Возьмем следующую разметку:
.wrapper
Данный код отлично работает, но только до тех пор, пока ширина окна просмотра не станет меньше 300px. Когда это случится, возникнет переполнение.
Чтобы избежать возникновения подобной ситуации, используйте гриды только тогда, когда достаточно места. Также, можно использовать CSS медиа запросы следующим образом:
.wrapper < display: grid; grid-template-columns: 1fr; grid-gap: 1rem; >@media (min-width: 400px) < .wrapper < grid-template-columns: 1fr 300px 1fr; >>
Длинные слова
Еще одной распространенной причиной переполнения становятся длинные слова, которые не помещаются в окне просмотра. Чаще всего это происходит на мобильных устройствах из-за их малой ширины окна просмотра.
Чтобы исправить это, нужно использовать CSS свойство overflow-wrap .
.article-content p
Это особенно полезно, когда контент вводит пользователь. Отличным примером такого контента являются комментарии. Пользователь может вставить длинный URL-адрес в свой комментарий, и это должно обрабатываться свойством overflow-wrap .
Минимальный размер контента в CSS Flexbox
Еще одной интересной причиной переполнения является минимальный размер содержимого в Flexbox. Что это значит?
Согласно CSS спецификации:
По умолчанию флекс элементы не будут уменьшаться ниже минимального размера содержимого (длина самого длинного слова или элемента фиксированного размера). Чтобы изменить это, установите свойство min-width или min-height .
Это означает, что флекс элемент с длинным словом не будет уменьшаться ниже минимального размера содержимого.
Чтобы исправить это, для флекс элемента можно либо установить свойству overflow любое значение кроме visible , либо установить свойство min-width: 0 .
.card__name
Минимальный размер контента в CSS Grid
Как и в случае с CSS Flexbox, у CSS Grid действует та же концепция минимального размера контента. При этом решение проблема переполнения несколько другое.
Давайте исследуем проблему. Предположим, что у нас есть боковая и основная секции, разметка которых построена на CSS гридах.
.wrapper
Также, у нас есть полоса с прокручиваемым контентом, расположенная в основной секции и с разметкой на флексбокс.
.section
Обратите внимание, что мы не используем свойство flex-wrap , потому что нам нужно, чтобы флекс элементы оставались на одной линии. Тем не менее, это не работает и вызывает переполнение.
Чтобы это исправить, нужно использовать minmax() вместо 1fr . В этом случае минимальный размер контента основного элемента не будет рассчитываться автоматически.
.wrapper
Отрицательные отступы
Элемент, расположенный за пределами экрана, может вызвать переполнение. Обычно это происходит потому, что у элемента установлены отрицательные отступы.
В следующем примере у нас есть элемент с отрицательным отступом, в документе с ориентацией текста слева направо.
.element
Интересно, что если разместить элемент с другой стороны, то переполнения не будет. В чем же дело?
Вот что говорится в CSS спецификации:
Пользовательские программы просмотра должны обрезать прокручиваемую область переполнения контейнеров прокрутки со сторон начала блока и области начало контента (таким образом, их поведение должно быть таким, как если бы у них не было прокручиваемого переполнения на этой стороне).
Так, для документов с ориентацией текста слева направо левая сторона окна как раз и является областью начала контента. В результате любой элемент, расположенный за границей экрана слева, будет обрезан, и переполнение не возникнет.
Таким образом, если необходимо убрать элемент за пределы экрана, не забудьте установить свойство overflow: hidden у его родителя, чтобы не было переполнения.
Изображения без свойства max-width
Если не позаботиться о больших изображениях заранее, то вы обязательно встретитесь с переполнением. Чтобы этого не происходило, убедитесь, что для всех изображений установлено свойство max-width: 100% .
Единицы измерения относительно окна браузера
Использование единиц измерения ширины относительно окна браузера в 100vw имеет оборотную сторону, которая выражается в возникновении переполнения, когда видна полоса прокрутки. На macOS значение 100vw отработает вполне нормально и не вызовет горизонтальную прокрутку.
В Windows полосы прокрутки выводятся по умолчанию, поэтому возникает переполнение.
Причина этого заключается в том, что при значении 100vw не учитывается ширина вертикальной полосы прокрутки браузера. В результате ширина будет равна 100vw плюс ширина полосы прокрутки. К сожалению, исправить это средствами CSS невозможно.
Тем не менее, при помощи JavaScript мы можем измерить ширину окна просмотра, исключая полосу прокрутки.
function handleFullWidthSizing() < const scrollbarWidth = window.innerWidth - document.body.clientWidth document.querySelector('myElement').style.width = `calc(100vw - $px)` >
Добавленные рекламные блоки
Добавленные на страницу рекламные блоки могут стать причиной переполнения, если их ширина больше ширины их родительского элемента. Чтобы предотвратить это, следует установить свойство overflow-x: hidden у родительского элемента рекламного блока.
Тщательно проверяйте каждый рекламный блок на веб-сайте, чтобы он не стал причиной переполнения.
А хорошая ли идея устанавливать свойство overflow-x: hidden для тега body?
Установка свойства overflow-x: hidden , подобна наложению повязки без решения проблемы. Если у вас есть переполнение, то лучше решить саму проблему.
Кроме того, применение overflow-x: hidden к элементу body не является хорошей идеей, потому что тогда не будет работать свойство position: sticky .
Как избежать переполнения в CSS
Ниже представлены некоторые вещи, на которые следует обращать внимание, чтобы уменьшить вероятность возникновения проблемы переполнения в CSS.
Тестируйте с реальным контентом
Ничто не сравнится по эффективности с тестированием с реальным контентом. При этом вы сможете убедиться, что разметка сайта будет корректно работать с самыми различными типами контента.
Учитывайте пользовательский контент
Для таких компонентов, как комментарии, следует учитывать, как было описано выше, случаи, когда пользователь будет вставляет длинный URL-адрес или вводить длинные слова.
Осторожно используйте CSS Grid и Flexbox
Какими бы полезными ни были CSS grid и flexbox, при неправильном использовании они могут легко вызвать переполнение. Как мы уже обсуждали выше, если не использовать свойство flex-wrap: wrap , то можно легко получить проблему переполнение. То же случится и при использовании grid-template-columns: 1fr 350px , когда ширина экрана меньше 350px.
Блок выходит за пределы родителя, что не так?
Здравствуйте. Есть меню селекта, внутри идет список элемента данного селекта. Проблема на скриншоте. Компонент item выпирает за пределы родительского блока и не трункейтится должным образом, должны быть точки в конце. Проблема вроде как решает если убрать display: flex с .select-option, но он по реализации там нужен.
- Вопрос задан более трёх лет назад
- 25200 просмотров