Все про overflow-wrap


Содержание

Свойство overflow

Свойство overflow управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую длину/ширину.

Обычно блок увеличивается в размерах при добавлении в него элементов, заключая в себе всех потомков.

Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое «переполняет» блок. Его отображение в этом случае задаётся свойством overflow .

visible

Если не ставить overflow явно или поставить visible , то содержимое отображается за границами блока.

Как правило, такое переполнение указывает на ошибку в вёрстке. Если содержимое может быть больше контейнера – используют другие значения.

hidden

Переполняющее содержимое не отображается.

Вылезающее за границу содержимое становится недоступно.

Это свойство иногда используют от лени, когда какой-то элемент дизайна немного вылезает за границу, и вместо исправления вёрстки его просто скрывают. Как правило, долго оно не живёт, вёрстку всё равно приходится исправлять.

При переполнении отображается полоса прокрутки.

scroll

Полоса прокрутки отображается всегда.

То же самое, что auto , но полоса прокрутки видна всегда, даже если переполнения нет.

overflow-x, overflow-y

Можно указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y :

Итого

Свойства overflow-x/overflow-y (или оба одновременно: overflow ) задают поведение контейнера при переполнении:

visible По умолчанию, содержимое вылезает за границы блока. hidden Переполняющее содержимое невидимо. auto Полоса прокрутки при переполнении. scroll Полоса прокрутки всегда.

Кроме того, значение overflow: auto | hidden изменяет поведение контейнера, содержащего float . Так как элемент с float находится вне потока, то обычно контейнер не выделяет под него место. Но если стоит такой overflow , то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье Свойство float.

Свойство CSS overflow

Если вы помещаете текст в блок div , то ширина этого элемента увеличивается в зависимости от области, охватываемой текстом. Но если задать ограничение по ширине или высоте элемента, появляется полоса прокрутки, когда содержимое элемента не может вписаться в него полностью.

Это касается полос прокрутки по умолчанию. Можно контролировать поведение содержимого элемента, когда он выходит за пределы блока, с помощью CSS-свойства overflow hidden .

Значения свойства overflow

visible: значение по умолчанию. Оно задает отображение содержимого вне блока элемента и позволяет не « заталкивать » содержимое внутрь блока элемента.

hidden: содержимое, выходящее за пределы блока элемента, будет скрыто.

scroll: добавляет полосы прокрутки и скрывает содержимое, выходящее за пределы блока элемента. Его можно увидеть с помощью полос прокрутки.

auto: добавляет полосы прокрутки, если необходимо.

initial: устанавливает значение по умолчанию.

inherit: устанавливает значение, которое задано для родительского элемента.

Теперь осмотрим, как каждое из этих значений влияет на контент.

visible

overflow: visible — содержимое может выходить за границы элемента, если его размеры превышают размеры контейнера. Выходящее за пределы элемента содержимое не влияет на стандартный макет.

Ширина и высота элемента div установлена на 200px и 100px . Если размеры содержимого больше размеров блока, то оно выходит за его пределы.

hidden

CSS overflow: hidden скрывает содержимое, выходящее за пределы контейнера.

scroll

Добавляет полосы прокрутки, даже если содержимое не выходит за пределы контейнера. Обратите внимание, что overflow: scroll добавляет горизонтальную и вертикальную полосы прокрутки.

В приведенной ниже демо-версии полосы прокрутки добавлены для обоих блоков, даже когда размеры содержимого не превышают высоту и ширину второго блока.

Это значение похоже на значение scroll , но полосы прокрутки добавляются только при необходимости. В приведенной ниже демо-версии overflow: auto добавляет вертикальную полосу прокрутки к первому блоку, содержимое которого превышает его высоту блока. А во втором случае полосы прокрутки не добавляются.

Также можно управлять тем, как содержимое, выходящее за пределы контейнера, ведет себя в горизонтальном и вертикальном направлении. Для этого используются два других свойства, о которых речь пойдет ниже.


overflow-x и overflow-y

Свойства overflow-x hidden и overflow-y задают, как содержимое, выходящее за рамки контейнера, отображается в горизонтальном и вертикальном направлении. Для них можно задать все шесть значений, описанных выше.

Давайте рассмотрим примеры.

Если ширина внешнего блока составляет 200 пикселей , а внутреннего — 250 пикселей , то задав для внешнего блока overflow-x: auto , мы добавим в него горизонтальную полосу прокрутки, так как ширина содержимого превышает ширину блока.

Если высота внешнего блока 100 пикселей , а высота внутреннего блока — 150 пикселей , то overflow-y: auto добавляет вертикальную полосу прокрутки.

Разбивка длинного текста

Предположим, что одно слово превышает ширину контейнера, и вы не хотите ни скрывать выходящий за пределы контейнера текст, ни добавлять полосу прокрутки. В этом случае можно разбить слово и принудительно перенести его на новую строку, используя свойство word-wrap , указав для него значение break-word .

Если мы укажем word-wrap: break-word , выходящее за пределы контейнера слово разбивается на два, чтобы оно могло вписаться в пределы контейнера body overflow hidden .

Поддержка браузерами

Свойство overflow отлично работает во всех браузерах. IE 4-6 расширяет контейнер, чтобы он соответствовал ширине содержимого.

Илон Маск рекомендует:  Псевдокласс target в CSS

Данная публикация представляет собой перевод статьи « CSS overflow Property » , подготовленной дружной командой проекта Интернет-технологии.ру

Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens)

Указанные ниже свойства CSS определяют как переносить длинные слова:

  1. только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел и неразрывный дефис ‑ ). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. «Мягкий дефис» ­ проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то или ​ переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре.
  2. после любого символа.
  3. согласно правилам русского языка с автоматическим применением дефиса.

В чём состоит различие одно свойства от другого

По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.

Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим word-break: keep-all; .

Для того, чтобы браузер не обращал внимания и на мягкий дефис, вставляем hyphens: none; .

Если требуется перенос слов, то word-wrap: break-word; советую применять всегда, поскольку он понимается всеми браузерами. Он отличается от word-break: break-all; , которое является приоритетным, тем, что слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.

При совместном использовании word-break: break-all; с hyphens: auto; , последнее игнорируется. hyphens: auto; расставляет любые дефисы по своему усмотрению. Но для того, чтобы оно работало, нужно обозначить свой язык, указав в div атрибут lang=»ru» .

Не переносить слова на другую строку

Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим «по умолчанию» и добавить white-space: pre; или white-space: nowrap;. Нажмите на white-space: nowrap; и посмотрите на наш полигон.

Управлять переносом слов при hyphens: auto;

15 комментариев:

Анонимный Хорошая статья. Спасибо! NMitra Рада слышать! Анонимный здорово, спасибо Vit Simak white-space: pre-wrap; очень помогает, но только если он один указан или максимум с word-wrap: break-word; Анонимный ыва Людмила Горбач ваваы Максим Дунаевский Вот спасибо! Поправил свою CSS как тут написано — текст на кнопках стал нормально отображаться. NMitra Пожалуйста, рада помочь. Анонимный Спасибо, хорошая статья. Анонимный kjgtfrfghjkl Анонимный ‘); drop table forum; — lol NMitra Чего-чего? Дмитрий lang=»ru» лучше писать в

-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word; NMitra Спасибо за дополнение! Dmitry Mycelin «’); drop table forum; — lol»
Это гугловская форма комментариев вообще-то. :)

White-space, word-wrap и их друзья :: Хранитель заметок

White-space, word-wrap и их друзья

Для разного контента нужны разные правила форматирования: фрагменты кода должны сохранять все переносы строк и табуляцию; текст, написанный случайным посетителем сайта, не должен «порвать» вёрстку и т.п. Форматирование можно контролировать с помощью CSS.

Свойство white-space

CSS свойство white-space описывает то, как будут обрабатываться пробельные символы внутри элемента.

Новая строка Пробелы и табуляция Перенос текста
normal схлопывается схлопываются есть
nowrap схлопывается схлопываются нет
pre остаётся остаются нет
pre-wrap остаётся остаются есть
pre-line остаётся схлопываются есть

Значения pre-wrap и pre-line доступны во всех современных версиях браузеров и в IE начиная с версии 8.0.

Свойство word-wrap

Изначально это свойство появилось в линейке браузеров IE и только потом перекочевало в другие браузеры, так и не появившись в спецификации CSS2. В CSS3 аналогичное поведение закреплено за свойством overflow-wrap, а word-wrap останется в качестве псевдонима.

Это свойство может принимать значения:

Переносы строк будут формироваться только в дозволенных позициях.

Слово будет разрываться, если в пределах строки нет подходящей позиции для переноса строки.

Это свойство можно использовать для переноса строк в теге

Свойство word-break

Когда нужно применить «грубую силу» и переносить любую строку в любом месте (я даже не представляю себе где это может потребоваться), то в дело вступает word-break.

Это свойство имеет больший приоритет, чем word-wrap ( overflow-wrap) и будет разрывать слова даже там, где это особо и не требуется.


В браузерах на Webkit это свойство имеет ещё одно нестандартное значение – break-word, которое по своему действию аналогично word-wrap.

Свойство hyphens

С нетерпением ждём, когда браузеры начнут делать автоматическую расстановку переносов в словах.

Основным препятствием на пути внедрения этой технологии стоит то, что браузеру требуется описание правил переноса слов для различных языков. На сегодняшний день только Safari и Firefox могут похвастаться этим.

CSS overflow-wrap

The overflow-wrap property specifies whether or not unbreakable words can in fact be broken arbitrarily to prevent overflow.

When word or other string is too long to fit inside its box, the overflow-wrap property can be used to force the word to be broken at an arbitrary point if there are no otherwise-acceptable break points in the line, so that it can wrap to the next line.

The overflow-wrap property only has an effect when the white-space property allows wrapping (it does by default).

The word-wrap property is an alternate name for overflow-wrap — they both do exactly the same thing.

Syntax

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Basic CSS

Working Example within an HTML Document

CSS Specifications

  • The overflow-wrap property is defined in CSS Text Module Level 3 (W3C Last Call Working Draft 10 October 2013).

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Илон Маск рекомендует:  Что такое код ldap_bind

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

Все про overflow-wrap

Каждый элемент на странице является прямоугольником. Размеры, позиционирование и поведение может регулироваться через CSS. Под поведением я подразумеваю как элемент обрабатывает события когда изменяется контент снаружи и внутри. Например, если вы не установили элементу высоту, то она будет увеличиваться пока в элементе не поместится весь контент. Но что случится когда вы все-таки установили высоту или ширину для элемента, а содержимое не поместилось? Здесь нам понадобится CSS-свойство overflow, которое позволяет вам указать как поступать в таких случаях. Всего существует четыре значения для этого свойства: visible (по умолчанию), hidden, scroll и auto. Также есть родственные свойства overflow-y и overflow-x, которые используются гораздо реже. Давайте рассмотрим поведение элементов с фиксированными размерами для каждого значения overflow и обсудим общие случаи использования.

Visible

Если вы не укажете свойство overflow, то по умолчанию оно будет равно visible. Итак, в основном, нет смысла явно устанавливать свойство в visible, до тех пор пока оно не будет перегружено его где-нибудь в другом месте, а вам потребуется поведение по умолчанию.

Здесь важно помнить, что даже если снаружи элемента есть видимый контент, этот контент не сместится на странице. Например:

В основном, вам не должно понадобиться устанавливать фиксированную высоту для элементов с текстом в них, поэтому таких ситуаций возникать не должно.

Hidden

Противоположное значение — hidden. В этом случае элемент прячет любой контент, который выходит за его границы.

Такое поведение особенно удобно для использования с динамическим контентом, возможности overflow позволяют избежать серьёзных проблем с вёрсткой макета. Однако, помните, что в этом случае контент скрыт и никаким способом он не станет доступным (кроме просмотра исходного текста страницы). Таким образом, если у пользователя размер шрифта по умолчанию больше, чем вы ожидали, текст может оказаться за пределами элемента и оказаться спрятанным от его глаз.

Scroll

Если элементу установленно значение scroll, то он будет скрывать непоместившееся содержимое, но появятся скроллбары, чтобы была возможность просмотреть весь контент.

Заметьте, что в этом случае вам будут показаны оба скроллбара, как горизонтальный, так и вертикальный, даже если для контента достаточно только одного из них.


Значение auto похоже на значение scroll, за исключением того, что скроллбары показываются, только там где они действительно необходимы.

Отмена свойства float

Один из самых распространённых случаев использования свойства overflow, как это ни странно, отмена свойства float. Установка свойства overflow не отменяет свойство float у элемента. Смысл такой, что элемент с установленным свойством overflow в значение auto или hidden, будет изменять размеры до тех пор, пока не вместит в себя все дочерние элементы, которым установлено свойство float, подразумевается что высота не установлена. Рассмотрим пример:

Обсуждение свойства float займёт отдельную статью, которой я возможно займусь в скором времени.

Кросс-браузерность.

Как и у большинства свойств CSS, у свойства overflow есть свои особенности обработки в разных браузерах.

Скроллбары должны быть внутри или снаружи элемента?

Firefox располагает их снаружи, IE — внутри. Я считаю, что только IE располагает их правильно (они должны быть внутри).

Ошибка расширения элемента в IE 8.

В новой версии IE появились новые ошибки, в том числе и такие серъёзные, из-за которых пропадает всё содержимое страницы. Подробности.

Плавающий макет.

IE версий 6, 7 и 8 игнорируют значение по умолчанию visible для фиксированных размеров и расширяет элемент, чтобы подогнать контент. Это особенно важно для сайтов с плавающим макетом. В некоторых случаях одна колонка может вытеснить другую, и в итоге ломается вся разметка.

Ещё про IE

IE отображает вертикальный скроллбар независимо от того, нужен он или нет. В некоторых случаях это может быть и полезно, но не всегда. Чтобы избавиться от этого, необходимо установить overflow: auto для элемента body.

CSS word-wrap/overflow-wrap – specify if a word can break anywhere

CSS property word-wrap (or overflow-wrap) specifies whether the Browser may break within a word to prevent overflow when an unbreakable string is too long to fit within the line box. It only has an effect when ‘white-space’ allows wrapping.

Note that word-wrap is legacy name for overflow-wrap. But Firefox supports word-wrap better. So we’ll use word-wrap for the purpose of this tutorial.

CSS property word-wrap

CSS version:
CSS 3
Value: normal | break-word
Initial: normal
Inherited: yes
Animatable: no

word-wrap values

normal
Lines may break only at allowed break points. A word longer that line box will not break other than allowed break points.
word-break Word may break at any point. If there are break points, then first attempt is to break at those points.

Example – normal and break-word word-wrap

In this example word is longer than line box.

  1. For word-wrap=normal case, it will only break and wrap at natural break points (like dash).
  2. For word-wrap=break-word case, it will break and wrap even if there is no natural break point (like dash). Note that first attempt is still made to break at natural break point.
Илон Маск рекомендует:  Запуск программы

Использование свойства overflow CSS

Приветствую вас дорогие друзья!

В одной из прошлых статей я рассказывала о наиболее часто используемых CSS-свойствах.

В этой статье я упоминала о свойстве overflow CSS, которое предназначено для управления контентом, расположенном в блочных элементах.

Сегодня я хочу более подробно остановиться на данном свойстве и разобрать примеры его использования на практике.

Управление отображением контента в блоке свойством overflow CSS

По умолчанию для всех блочных элементов overflow CSS имеет значение visible. При данном значении отображается все содержимое блока, даже в том случае, если контент выходит за пределы заданных размеров.

Для overflow CSS можно задать следующие значения:

  • hidden — отображение контента только внутри блока, а остальная часть обрезается
  • scroll — добавляет полосы прокрутки по вертикали и горизонтали
  • auto – добавление полос прокрутки только в случае, если контент выходит за границы блока
  • inherit – наследование значений родительского блока

Больше всего возникает проблем с маленькими по размеру блоками, например, такими как названия товаров в каталоге интернет-магазина. Как правило, на начальном этапе они выглядят вот так:

Из-за того, что у товаров разные по длине названия, карточки имеют разную высоту, и это выглядит очень не красиво.

Если мы просто ограничим высоту бока с названием у нас получится вот так:

Даже при заданном размере блока с названием, текст все равно выходит за его пределы и налезает на цену товара. Подобные случаи встречаются довольно часто и для решения этой проблемы нам нужно сделать следующее:

overflow

Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.


Краткая информация

Значение по умолчанию visible
Наследуется Нет
Применяется К блочным элементам
Анимируется Нет

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

Песочница

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow

Объектная модель

Примечание

Internet Explorer до версии 7.0 включительно:

  • относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position : fixed .

Internet Explorer 8:

  • Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
  • Для блока, у которого указаны свойства float и overflow со значением scroll , игнорируется ширина, заданная через свойство max-width .
  • Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.

Firefox 3.6 некорректно применяет overflow к группам ячеек таблицы (

, , ).

Спецификация ?

Спецификация Статус
CSS Basic Box Model Рабочий проект
CSS Level 2 (Revision 1) Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

4 12 1 7 1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  • — свойство браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Свойство overflow и плавающие (float) блоки

При кодировании на плавающих блоках широко распространена следующая проблема — обертывающий блок расширяется не на всю высоту плавающего элемента. Обычно эту проблему решают путем добавления элементов со свойством clear сразу после плавающих элементов или присоединив clearfix к обертывающему блоку. Существует еще один способ решения — использовать свойство overflow . Рассмотрим этот способ более подробно.

На приведенном выше примере показан не расширившийся в размерах родительский контейнер. Чтобы сделать его расширение возможным, надо добавить CSS объявление overflow:auto (или overflow:hidden ) к родительскому контейнеру. Это, пожалуй, самый легкий способ растянуть родительский контейнер до размеров плавающих элементов.

Также объявление overflow:auto можно использовать для предотвращения обертывания контента вокруг плавающего элемента. Допустим, вы создаете список комментариев. Аватар у вас будет плавающий ( float:left ) относительно левого края, а комментарии расположатся справа. Чтобы предотвратить обертывание комментария вокруг аватара, к блоку с комментарием надо добавить объявление overflow:auto . Выгода от использования overflow заключается в следующем – блоку с комментарием не надо задавать ни float , ни width . Контейнер автоматически выравнивается по правой стороне родительского контейнера.

Недостатки

Однако у этого способа есть свои недостатки:

  • Если размеры контента будут превышать размеры родительского блока, использование overflow:auto вызовет появление полосы прокрутки. Например, если вы используете длинный непрерывный текст или большое изображение, которые выходит за пределы родительского элемента, появится полоса прокрутки.
  • Чтобы полоса прокрутки не появлялась, нужно воспользоваться объявлением overflow:hidden . И тут не без недостатка: overflow:hidden спрячет всякий контент, который будет выходить за границы элемента-родителя.

Word-wrap

Проблема длинного непрерывного текста решается путем добавления к элементу-родителю объявления word-wrap:break-word . Вследствие чего текст будет принудительно сворачиваться на новую линию.

Max-width

Чтобы предотвратить выход больших изображений за установленные границы, нужно добавить max-width:100% . Таким образом, размеры изображения будут подстроены под размеры родительского блока.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL