Для каких целей используется css свойство word wrap break word
Свойство word-break указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область.
Краткая информация
| Значение по умолчанию | normal |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
Обозначения
Значения
normal Используются правила переноса строк по умолчанию. Как правило, в этом случае строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью <br> ). break-all Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока. Значение не работает для текста на китайском, корейском или японском языке. keep-all Не разрешает перенос строк в словах на китайском, корейском или японском языке. Для остальных языков действует как normal .Пример
Результат данного примера показан на рис. 1.
Рис. 1. Перенос длинных слов
Объектная модель
Объект.style.wordBreak
Примечание
Chrome до версии 44, Opera до версии 31, Safari до версии 9, Android и Opera Mobile не поддерживают значение keep-all .
Спецификация
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor's draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область.
Краткая информация
| Значение по умолчанию | normal |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Процентная запись | Неприменима |
| Анимируется | Нет |
Синтаксис
Обозначения
Значения
normal Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью <br> ). break-word Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.Пример
Результат данного примера показан на рис. 1.
Рис. 1. Перенос длинных слов
Объектная модель
Объект.style.wordWrap
Спецификация
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor's draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение метилпропенилендигидроксициннаменилакрилическая кислота очень похожа на некоторых людей с « подвывертом »! Не знаем, как справляться с такими трудными личностями, но реализовать перенос текста CSS точно поможет.
Зачем переносить «непереносимое»
В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью « переезжает » на следующую строчку.
Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет « выглядеть » на клиентской стороне трудно, поэтому задавать переносы « вручную » бессмысленно:
Решаем проблему переноса слов с помощью HTML
Перед тем, как рассмотреть CSS перенос слов , изучим возможности решения этой проблемы с помощью языка гипертекста.
Для этого в HTML имеется несколько вариантов:
Как реализовать CSS перенос слов
Перед тем, как реализовать CSS перенос слов , давайте рассмотрим несколько свойств, способных разрешить основную проблему:
- word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:
Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:
- normal – слова не переносятся;
- break-word – автоматический перенос слов;
- inherit – наследование значения родителя.
Пример, иллюстрирующий применение этого свойства:
В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:
Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать того чтобы реализовать CSS перенос слов .
- word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.
Свойство принимает три значения:
- normal – используются правила переноса, установленные по умолчанию;
- word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
- keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.
hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:
- none – отключает CSS перенос слов;
- manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега <wbr> или мягкого переноса () ;
- auto – браузер автоматически переносит слова на основе своих настроек.
Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:
Как реализовать запрет переноса слов CSS
Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет использовать CSS перенос слов можно реализовать несколькими способами:
- С помощью неразрывного пробела   , который устанавливается в местах переноса строки или слов;
- Задав свойству white-space значение « nowrap » ( white-space: nowrap ).
Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.
Я написал электронную книгу, и это был сущий кошмар, когда мне приходилось сталкиваться с CSS переносом текста внутри блоков кода. Иногда высота блока текста выше, чем контейнера. Иногда проблемы возникали из-за длинных URL-адресов :
В этой статье мы рассмотрим стандартные свойства, используемые для решения таких проблем, и приведем несколько сценариев, которые иллюстрируют особенно сложные случаи переноса текста.
Свойства
Давайте бегло рассмотрим основные свойства.
Свойство word-wrap принимает два значения: normal ( по умолчанию ) и break-word . Это не считая трех глобальных значений: inherit , initial и unset .
По умолчанию особенно длинное слово не будет разрываться. При CSS переносе текста на новую строку браузер сохраняет это поведение, пока дело не доходит до просмотра текста на смартфоне. Контейнер слова может быть адаптивным, а само слово будет вываливаться за его границы, что приведет к появлению горизонтальной прокрутки по ширине страницы.
В первом примере показано поведение по умолчанию для таких случаев:
Второй пример этой демо-версии иллюстрирует действие свойства overflow-wrap: break-word , которое указывает браузеру разрывать слово, когда оно выходит за пределы контейнера.
Важно отметить : в текущей версии спецификации по текстам CSS3 свойство word-wrap было заменено на overflow-wrap , которое принимает те же значения. Здесь вы найдете обзор поддержки браузерами этого нового свойства .
Свойство word-break предназначено только для требующих определенного поведения языков ( китайского, японского и корейского ).
Я обычно использовал его для CSS переноса длинных слов, но, если речь не идет о не выше перечисленных языках, то лучше использовать свойство overflow-wrap, о котором я только что рассказал.
Свойство hyphens указывает браузеру, как обрабатывать переносы слов с добавлением дефисов. Оно принимает следующие значения: none , manual и auto . Это свойство на данный момент поддерживается браузерами не полностью, поэтому будет работать нормально только в Firefox .
Значение none задает поведение, при котором дефисы никогда не будут добавляться в слова при разрыве строк.
При использовании значениия manual слова будут разрываться при разрыве строк только на символах, которые указывают это. В разметку добавляются специальные теги, на которых при необходимости переносятся слова.
Тег ­ задает мягкий CSS перенос текста на новую строку – он указывает разрыв слова, если это необходимо, но дефис на экране отображается только, если слово переносится.
Значение auto указывает, что слова могут разрываться в определенных местах или автоматически согласно разрешениям, указанным в ресурсах для конкретных языков ( если они предоставляются браузером ). В этом случае переносы будут зависеть от конкретного языка, и для документа должен быть указан атрибут lang .
Я предпочитаю использовать свойство white-space . Оно определяет, как пробелы, отступы табуляции, принудительные разрывы строк обрабатывается внутри элемента. Оно может оказаться чрезвычайно полезным для устранения неполадок и получение большего контроля над содержимым ячейки таблицы.
Свойство принимает пять значений: normal ( по умолчанию ), nowrap , pre , pre-wrap и pre-line .
Приведенная ниже демо-версия иллюстрирует все эти значения в действии; учитывайте дополнительные промежутки, включенные в разметку.
При CSS переносе текста в блоке по умолчанию пустые пространства объединяются и строки разрываются, чтобы соответствовать размерам контейнера. Это показано в первом примере, где в текст добавлены дополнительные пробелы, но при отображении они не выводятся.
Значение nowrap ( пример 2 ) также не воспринимает дополнительные пробелы, но в отличие от normal строки текста не переносятся в соответствии с размерами контейнера.
pre поддерживает дополнительное пробелы в разметке и не разрывает строки при выходе за пределы контейнера, как показано в примере 3.
Пример 4, pre-wrap не объединяет пустые пространства, но переносит строки при выходе за пределы контейнера.
Значение pre-line объединяет пробелы ( за исключением символов перехода на новую строку ) и разрывают текст, чтобы он соответствовал границам контейнера, как показано в последнем примере.
Блоки кода
По умолчанию блоки кода оборачиваются в теги pre и не переносятся. Это может привести к большой путанице.
По личному опыту могу сказать, что решение этой проблемы зависит от конкретного языка. И она может быть решена с помощью принудительных CSS переносов текстов по словам ( без дефисов ) или горизонтальной прокрутки.
Убедитесь, что все установленные значения white-space не приводят к объединению пустых пространств и пробелов, иначе это нарушит синтаксис кода.
Я также столкнулся со сложностями, связанными с адаптацией кода при структурировании верстки из-за использования таблиц. В таких случаях я применяю специальный стиль для контейнера таблицы, чтобы переопределить его поведение.
Многоточия, которые имеют значение
CSS text-overflow: ellipsis является неудобным. Оно требует добавления большого количества кода, так как работает только в сочетании с кучей других свойств. Кроме этого, оно действует только на одну строку текста, что делает его еще более неудобным.
Есть JQuery-плагин , dotdotdot , который создает многоточие. С его помощью можно добавить даже ссылку в конце для продолжения чтения.
Вот пример его применения:
Супер специфические расположения разрывов
Иногда нужно, чтобы слова разрывались, но только в очень специфических местах. Это делает все еще сложнее. Как нам сообщить браузеру, что в этих местах нужно добавлять CSS перенос текста ?
Это достигается за счет использования мягкого или твердого переноса с помощью дефисов, который мы рассматривали ранее. При необходимости строка будет разрываться в местах, где добавлены теги ­:
Слишком длинные ссылки
Когда я готовил к выходу свою электронную книгу, мне неоднократно приходилось сталкиваться с проблемой слишком длинных ссылок.
По умолчанию они не разрываются, и это приводит к некорректному отображению на небольших экранах. URL-адрес нужно разрывать, когда это необходимо, но без дефисов, чтобы ссылка осталась рабочей. Также нужно быть очень осторожным при применении CSS переносов . Если вы сделаете что-то неправильно, разрываться будут не только URL-адреса , но и любые слова.
Применив overflow-wrap: break-word к ссылке, вы зададите разрыв URL-адреса при ее выходе за пределы контейнера, хотя это свойство поддерживается не во всех браузерах.
Заключение
Задать правильное сочетание свойств для решения проблемы переноса может оказаться непростой задачей. Но попрактиковавшись и проанализировав свои ошибки, вы сможете найти верное решение:
Пожалуйста, оставляйте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, лайки, отклики!
Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение метилпропенилендигидроксициннаменилакрилическая кислота очень похожа на некоторых людей с « подвывертом »! Не знаем, как справляться с такими трудными личностями, но с переносом слов CSS точно поможет:
Зачем переносить «непереносимое»
В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью « переезжает » на следующую строчку.
Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет « выглядеть » на клиентской стороне трудно, поэтому задавать переносы « вручную » бессмысленно:
Решаем проблему переноса слов с помощью HTML
Перед тем, как рассмотреть перенос длинных слов в CSS , изучим возможности решения этой проблемы с помощью языка гипертекста.
Для этого в HTML имеется несколько вариантов:
- Использование тега — элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте « разлома » знак переноса, что может негативно сказаться на читаемости всего текста:
Перенос слов средствами CSS
Перед тем, как запретить перенос слов в CSS , давайте рассмотрим несколько свойств, способных разрешить основную проблему:
- word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:
Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:
- normal – слова не переносятся;
- break-word – автоматический перенос слов;
- inherit – наследование значения родителя.
Пример, иллюстрирующий применение этого свойства:
В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:
Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать для переноса слов в CSS .
- word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.
Свойство принимает три значения:
- normal – используются правила переноса, установленные по умолчанию;
- word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
- keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.
- hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:
- none – отключает перенос слов в CSS ;
- manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса () ;
- auto – браузер автоматически переносит слова на основе своих настроек.
Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:
Запрет переноса слов
Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет переноса слов в css можно реализовать несколькими способами:
Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.
Указанные ниже свойства CSS определяют как переносить длинные слова:
В чём состоит различие одно свойства от другого
По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.
Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим word-break: keep-all; .
Для того, чтобы браузер не обращал внимания и на мягкий дефис, вставляем hyphens: none; .
Если требуется перенос слов, то word-wrap: break-word; советую применять всегда, поскольку он понимается всеми браузерами. Он отличается от word-break: break-all; , которое является приоритетным, тем, что слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.
Не переносить слова на другую строку
Управлять переносом слов при hyphens: auto;
15 комментариев:
Читайте также: