Когда тексту необходимо места больше чем имеет блок браузер отобразит полосу
Переполнение контента внутри блока — распространённое явление при вёрстке контента. Переполнением считается ситуация, при которой контент внутри контейнера больше, чем размер самого контейнера. Распространённый случай такого поведения — использование контейнера с фиксированными значениями высоты и ширины.
Интересно: использование фиксированных значений высоты и ширины в большинстве случаев не является хорошей практикой. Так можно достаточно быстро сверстать блок по макету, но одновременно с этим отнимается возможность расширения функционала. Любой отход от изначального контента может привести к проблемам, связанным с выходом контента из контейнера. Используйте фиксированные значения высоты и ширины там, где это предполагается в дизайне или для создания специфичного функционала.
В качестве примера создадим блок с фиксированными значениями высоты и ширины. Внутри такого контейнера расположим текст так, чтобы он вышел за границы блока.
Большая часть описания профессии вышла за пределы блока. Браузеры в данном случае считают контент важнее,чем контейнер, в котором он лежит, и не скрывают текст. Это не лишено смысла, ведь главная часть любой страницы — её контент. Без него вся страница не будет иметь никакого смысла.
Такая ситуация называется переполнением, и CSS позволяет управлять им. Для этого существует три свойства:
- overflow-x — управление переполнением по горизонтали.
- overflow-y — управление переполнением по вертикали.
- overflow — сокращённая запись двух предыдущих свойств. Если указать внутри только одно значение, то оно применится к двум осям одновременно. Наиболее распространённый вариант использования.
По умолчанию свойство имеет значение visible , которое и указывает на то, что при переполнении контент должен отрисовываться вне своего родителя. В противовес visible есть значение hidden . Его задача обратна — скрыть контент, который выходит за пределы своего родителя. При этом доступ к такому контенту теряется. При использовании свойства overflow важно помнить, что это свойство не является наследуемым, поэтому его необходимо указывать у каждого блока, с которым происходит переполнение. В дальнейшем вы увидите примеры таких реализаций.
Распространённая ситуация при вёрстке блоков, которые должны находиться в HTML, но быть временно скрытыми. Например, при создании слайдеров, в которых все неактивные слайды находятся за пределами блока и скрыты с помощью свойства overflow .
Хоть теперь вёрстка не «сломалась» от переполнения, но прочитать описание профессии невозможно. Не хватает какой-нибудь полосы прокрутки внутри блока. Свойство overflow позволяет добавить полосу прокрутки в такой блок. Для этого может использоваться два значения:
В чём разница между ними? Посмотрим на примере, взяв вначале значение scroll . Установим для секции новое значение свойства overflow .
Теперь мы можем прокрутить контент внутри блока и наконец прочитать описание всей профессии. Но прокрутка появилась не только по вертикали, но и по горизонтали. При этом она недоступна, так как в этом направлении нет переполнения контента. Во-первых, это «портит» дизайн, а во-вторых отнимает место внутри блока. Если такое поведение явно не обозначено в макете, то стоит добавить полосу прокрутки только для того направления, где возникает переполнение контента. Это возможно с помощью значения auto . В этом случае браузер следит за тем, где возникло переполнение и добавляет полосу прокрутки именно для этого направления.
Важно: используйте свойство overflow с осторожностью. Велик соблазн использовать его в случае быстрой вёрстки, когда при выходе макета за пределы экрана выставляют следующий CSS код:
Это действительно решит проблему с горизонтальной прокруткой, но может и обрезать важную часть контента. Потратьте чуть больше времени, но локализуйте проблему и решите именно её. Это сделает вашу вёрстку понятнее и проще.
Вы можете добавить полосы прокрутки не только для текста
Если у вас есть большое изображение, которое вы хотите отображать на меньшем пространстве, можно добавить вокруг него полосы прокрутки так же, как и для текста.
В этом примере изображение размером 400 на 509 пикселей размещено внутри абзаца, размер которого составляет 300 на 300 пикселей.
Firefox поддерживает использование overflow для тегов TBODY
Одна действительно приятная особенность браузера Firefox заключается в том, что вы можете использовать свойство overflow во внутренних тегах таблиц, таких как tbody и thead или tfoot . Это означает, что вы можете установить полосы прокрутки для содержимого таблицы, а ячейки заголовков останутся привязанными к ним.
Дайте знать, что вы думаете по этой теме статьи в комментариях. За комментарии, дизлайки, лайки, отклики, подписки огромное вам спасибо!
Пожалуйста, опубликуйте свои отзывы по текущей теме статьи. За комментарии, подписки, дизлайки, лайки, отклики низкий вам поклон!
От автора: в наши дни пользовательские полосы прокрутки становятся все более популярными, и я хочу рассмотреть эту тему. Есть разные причины для настройки полосы прокрутки. Например, полоса прокрутки по умолчанию может сделать пользовательский интерфейс приложения несовместимым с различными операционными системами, и поэтому нам нужно использовать единый стиль полосы прокрутки.
Мне всегда было интересно узнать, как настроить полосу прокрутки в CSS, но у меня не было возможности сделать это. В этой статье я воспользуюсь такой возможностью, узнаю больше о полосах прокрутки и задокументирую свои открытия.
visible
overflow: visible - содержимое может выходить за границы элемента, если его размеры превышают размеры контейнера. Выходящее за пределы элемента содержимое не влияет на стандартный макет.
Ширина и высота элемента div установлена на 200px и 100px . Если размеры содержимого больше размеров блока, то оно выходит за его пределы.
Что делать с дополнительным текстом?
Когда текста больше, чем может поместиться в доступное пространство макета, у вас есть несколько вариантов:
Лучшим вариантом, как правило, является последний: создать прокручиваемый текстовый блок. Тогда пользователь сможет прочитать весь текст, а макет останется без изменений.
HTML и CSS для этого :
overflow: auto; указывает браузеру добавлять полосы прокрутки ( скролл ), если текст выходит за границы блока div .
Но для того, чтобы это сработало, также нужно задать для этого блока div свойства ширины и высоты, чтобы определить границы контейнера.
Вы также можете обрезать текст, изменив значение свойства overflow с auto на hidden . Если вы не укажете свойство overflow , скролл на сайте работать не будет, и текст будет выходить за границы блока div .
Решение на основе JS
Приведенный ниже скрипт позволяет скрыть полосу прокрутки ( скролл ) последовательно во всех браузерах. Это достигается следующим образом:
- Этот скрипт принудительно включает полосу прокрутки для элемента с помощью CSS overflow-x:scroll ;
- Затем вычисляется ширина полосы прокрутки;
- Рассчитанная ширина устанавливается как отрицательный отступ для внешнего элемента. Это эффективно скрывает полосу прокрутки во всех браузерах.
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, лайки, подписки, отклики, дизлайки!
Пожалуйста, опубликуйте ваши мнения по текущей теме статьи. За комментарии, подписки, отклики, дизлайки, лайки огромное вам спасибо!
Если вы помещаете текст в блок div , то ширина этого элемента увеличивается в зависимости от области, охватываемой текстом. Но если задать ограничение по ширине или высоте элемента, появляется полоса прокрутки, когда содержимое элемента не может вписаться в него полностью.
Это касается полос прокрутки по умолчанию. Можно контролировать поведение содержимого элемента, когда он выходит за пределы блока, с помощью CSS-свойства overflow hidden .
Создаем блок с прокручиваемым текстом с помощью CSS и HTML
Прокручиваемый HTML-блок - это блок, в котором, когда его содержимое больше размеров самого блока, справа и снизу появляются полосы прокрутки. Другими словами, если у вас есть блок, в котором может поместиться около 50 слов, и у вас есть текст, состоящий из 200 слов, в прокручиваемом HTML-блоке появятся полосы прокрутки, чтобы вы могли видеть остальные 150 слов. В стандартном HTML-блоке дополнительный текст просто выходит за его границы.
Создать прокручиваемый HTML-блок ( скролл для сайта ) довольно просто.
Вам просто нужно установить ширину и высоту элемента, а затем использовать свойство CSS overflow , чтобы указать поведение элемента, когда содержимое выходит за его пределы.
Настройка дизайна долосы прокрутки
Раньше пользовательская полоса прокрутки использовалась только для webkit, поэтому, она не использовались в Firefox и IE. Сейчас, у нас есть новый синтаксис, который работает только в Firefox и упростит нам жизнь, когда он будет полностью поддерживаться. Я пройдусь по старому синтаксису Webkit, а затем по новому.
Поддержка браузерами
Свойство overflow отлично работает во всех браузерах. IE 4-6 расширяет контейнер, чтобы он соответствовал ширине содержимого.
Пожалуйста, оставляйте ваши отзывы по текущей теме материала. За комментарии, дизлайки, подписки, отклики, лайки низкий вам поклон!
Пожалуйста, оставляйте ваши отзывы по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, лайки, подписки, отклики!
Значения свойства overflow
visible: значение по умолчанию. Оно задает отображение содержимого вне блока элемента и позволяет не « заталкивать » содержимое внутрь блока элемента.
hidden: содержимое, выходящее за пределы блока элемента, будет скрыто.
scroll: добавляет полосы прокрутки и скрывает содержимое, выходящее за пределы блока элемента. Его можно увидеть с помощью полос прокрутки.
auto: добавляет полосы прокрутки, если необходимо.
initial: устанавливает значение по умолчанию.
inherit: устанавливает значение, которое задано для родительского элемента.
Теперь осмотрим, как каждое из этих значений влияет на контент.
Старый синтаксис
overflow-x и overflow-y
Свойства overflow-x hidden и overflow-y задают, как содержимое, выходящее за рамки контейнера, отображается в горизонтальном и вертикальном направлении. Для них можно задать все шесть значений, описанных выше.
Давайте рассмотрим примеры.
Если ширина внешнего блока составляет 200 пикселей , а внутреннего - 250 пикселей , то задав для внешнего блока overflow-x: auto , мы добавим в него горизонтальную полосу прокрутки, так как ширина содержимого превышает ширину блока.
Если высота внешнего блока 100 пикселей , а высота внутреннего блока - 150 пикселей , то overflow-y: auto добавляет вертикальную полосу прокрутки.
Полосы прокрутки могут использоваться в таблицах
Длинные таблицы могут быть очень трудными для восприятия, но, помещая их в блок div ограниченного размера, а затем, добавляя свойство overflow ( как способ сделать скролл ), можно создавать таблицы с большим количеством данных, которые не займут слишком много пространства на странице,
Самый простой способ сделать это - так же, как изображение и текст, просто оберните таблицу в блок div , установите его ширину и высоту и добавьте свойство overflow ( скролл внутри div ):
Однако при этом имеет место один нюанс. В подобных случаях, как правило, также появляется горизонтальный скролл, потому что браузер предполагает, что, чтобы дать пользователю возможность просмотреть всю таблицу, нужны две полосы прокрутки.
scroll
Добавляет полосы прокрутки, даже если содержимое не выходит за пределы контейнера. Обратите внимание, что overflow: scroll добавляет горизонтальную и вертикальную полосы прокрутки.
В приведенной ниже демо-версии полосы прокрутки добавлены для обоих блоков, даже когда размеры содержимого не превышают высоту и ширину второго блока.
Это значение похоже на значение scroll , но полосы прокрутки добавляются только при необходимости. В приведенной ниже демо-версии overflow: auto добавляет вертикальную полосу прокрутки к первому блоку, содержимое которого превышает его высоту блока. А во втором случае полосы прокрутки не добавляются.
Также можно управлять тем, как содержимое, выходящее за пределы контейнера, ведет себя в горизонтальном и вертикальном направлении. Для этого используются два других свойства, о которых речь пойдет ниже.
Разбивка длинного текста
Предположим, что одно слово превышает ширину контейнера, и вы не хотите ни скрывать выходящий за пределы контейнера текст, ни добавлять полосу прокрутки. В этом случае можно разбить слово и принудительно перенести его на новую строку, используя свойство word-wrap , указав для него значение break-word .
Если мы укажем word-wrap: break-word , выходящее за пределы контейнера слово разбивается на два, чтобы оно могло вписаться в пределы контейнера body overflow hidden .
Ширина полосы прокрутки
Во-первых, нам нужно определить размер полосы прокрутки. Это может быть ширина вертикальных полос прокрутки и высота горизонтальных.
Переполнение текста
Перед продолжением изучите вёрстку этого примера. Вы можете обнаружить пару новых свойств, которые относятся к модулю CSS Flexible Box Layout. С этим модулем вы познакомитесь в курсе CSS: Flex.
Превью выглядит неплохо с текущим количеством текста, но если его станет больше, то вся вёрстка может развалиться.
Интересно: одна из задач хорошего верстальщика — предусмотреть различные варианты контента внутри блока. Попробуйте в полях, где ожидается имя, выставлять длинные последовательности. Среди дизайнеров хорошей практикой является тестирование макета на «Константине Константинопольском»
Почему понадобилось столько свойств 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 .
Полосы прокрутки эффективны и необходимы для контроля общей высоты или ширины страницы. Они позволяет получить доступ к содержимому блока DIV , которое выходит за его пределы, либо с помощью прокрутки, либо с помощью функции панорамирования.
По умолчанию стилизация для полос прокрутки ( скролла ) определяются браузером, а не темой оформления вашего сайта. Поэтому их использование без дополнительной обработки может привести к результату, который будет выглядеть странно.
Браузеры на основе Webkit , такие как Chrome , Safari и т. д., предоставляют псевдоселектор для настройки цвета и размера полос прокрутки в соответствии с настройками сайта.
Вы можете убрать полосу прокрутки ( скролл ), используя следующий фрагмент CSS- кода :
Поскольку этот CSS-селектор специфичен для webkit-браузеров , мы должны создать резервный вариант для достижения такого же эффекта в других браузерах, таких как Firefox , IE , Edge и т.д.
Возможное решение для создания скролла на чистом CSS :
Приведенный выше CSS-код позволяет убрать вертикальный скролл, но у этого способа есть один недостаток - в разных браузерах будет разная ширина / размер полос прокрутки. Поэтому нельзя статически указать их. Таким образом, нам нужно адаптировать данную концепцию и прописать динамическое определение высоты прокрутки с помощью JavaScript .
hidden
Overflow: hidden CSS скрывает содержимое, выходящее за пределы контейнера.
Вступление
Первое, что я хочу объяснить, — это компоненты или части полосы прокрутки. Полоса прокрутки содержит дорожку и ползунок. Вот наглядное изображение, которое их показывает:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Дорожка — это основа полосы прокрутки, а ползунок — это то, что пользователь перетаскивает для прокрутки страницы или раздела.
Следует иметь в виду одну важную вещь: полоса прокрутки может работать горизонтально или вертикально, в зависимости от дизайна. Кроме того, она может измениться при работе с многоязычным веб-сайтом, который работает как слева направо (LTR), так и справа налево (RTL).
Читайте также: