Основные варианты решения проблемы переноса слов в CSS

Труднопереносимыми бывают не только люди, но и слова. Например, химическое соединение метилпропенилендигидроксициннаменилакрилическая кислота похожа на некоторых людей с «подвывертом»! Не знаем, как справляться с такими трудными личностями, но с переносом слов CSS точно поможет:

Основные варианты решения проблемы переноса слов в CSS

Зачем переносить «непереносимое»

В большинстве случаев при выведении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно в полном объеме «переезжает» на следующую строчку.

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

Основные варианты решения проблемы переноса слов в CSS

Решаем проблему переноса слов при помощи HTML

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

  • Использование символа мягкого разрыва ­ — может задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после &shy, а после первой половины отображается знак переноса, похожий на дефис:
<body><p>Пример сложного химического соединения и текста - метилпропенилендигидрок&shy;сициннаменилакрилическая кислота</p></body>
Основные варианты решения проблемы переноса слов в CSS
  • Использование тега — элемент появился в HTML 5. Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не отображает в месте «разлома» знак переноса, что может негативно сказаться на читаемости всего текста:
<style type="text/css">wbr { display: inline-block; }</style></head><body><p>метилпропенилен<wbr>дигидроксицинна<wbr>менилакрилическая кислота</p></body>

Основные варианты решения проблемы переноса слов в CSS
В некоторых браузерах поддержка тега <wbr> реализована некорректно. В них он будет работать, если для него в коде CSS прописано свойство display со значением inline-block.

Перенос слов средствами CSS

Перед тем, как запретить перенос слов в CSS, давайте рассмотрим пару свойств, способных разрешить основную проблему:

  1. word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу же следует предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C ещё не определился. Так что специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:

Основные варианты решения проблемы переноса слов в CSS Тем не менее, это свойство «воспринимается» всеми современными браузерами и будет эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:

  • normal – слова не переносятся;
  • break-word – автоматический перенос слов;
  • inherit – наследование значения родителя.

Пример, иллюстрирующий применение этого свойства:

<style type="text/css">.container{background-color: rgb(204,204,204);padding:10px;width:200px;}.content{word-wrap: break-word;}</style></head><body><div class="container"><p class="content">метилпропенилендигидроксициннаменилакрилическая кислота</p></div></body>

Основные варианты решения проблемы переноса слов в CSS В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap. Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, так что лучше использовать старую версию свойства:
Основные варианты решения проблемы переноса слов в CSS Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome, но не поддерживается в IE. Так что overflow-wrap лучше не использовать для переноса слов в CSS.

  1. word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3. Оно будет валидным, но предназначено для работы со строками, так что перенос слов может производиться грамматически неправильно.

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

  • normal – используются правила переноса, установленные по умолчанию;
  • word-break – перенос строк осуществляется автоматом, чтобы слово поместилось в установленные по ширине размеры контейнера;
  • keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.

Пример:

<style>.content { font-size: 30px; background: rgb(51,204,153); width: 170px; padding: 10px; word-break:break-all; } </style> </head> <body> <div class="content">   <p>Синхрофазотрон</p>   <p>Обеспокоенное состояние</p>   <p>Одиннадцатиклассница</p>   <p>метоксихлордиэтиламинометилбутиламин</p>  </div> </body>
Основные варианты решения проблемы переноса слов в CSS
  1. hyphens – новое свойство, которое появилось с выходом CSS3. Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает пару значений:
  • none – отключает перенос слов в CSS;
  • manual(значение по умолчанию) – слова переносятся в тех участках текстового блока, где это задано при помощи тега <wbr> или мягкого переноса (­);
  • auto – браузер автоматически переносит слова на основе ваших параметров.

Для корректной работы свойства в теге <html> или <p> должен присутствовать атрибут lang со значением «ru»(lang=»ru»).

Свойство поддерживается последними версиями IE, Opera и Firefox. Для каждого из них прописывается строчка CSS. Hyphens не поддерживается Google Chrome. Пример:

<style type="text/css">.container{background-color: rgb(153,255,204);padding:10px;width:200px;}.content{-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;}</style></head><body><div class="container"><p class="content" lang="ru">метилпропенилендигидроксициннаменилакрилическая кислота</p></div></body>
Основные варианты решения проблемы переноса слов в CSS

Запрет переноса слов

Иногда необходимо сделать так, чтобы строка выводилась в полном объеме без разрыва. Запрет переноса слов в css можно реализовать несколькими методами:

  • При помощи неразрывного пробела &nbsp, который устанавливается в местах переноса строки или слов;
  • Задав свойству white-space значение «nowrap»(white-space: nowrap).

Пример реализации:

<style type="text/css">.container{background-color: rgb(153,255,204);padding:10px;width:200px;}.content{-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;}.nowrap{white-space: nowrap;}</style></head><body><div class="container"><p>метилпропенилендигидроксициннаменилакрилическая кислота раз</p><p class="content" lang="ru">метилпропенилендигидроксициннаменилакрилическая два</p><p class="nowrap">метилпропенилендигидроксициннаменилакрилическая кислота три</p><p>метилпропенилендигидроксициннаменилакрилическая&nbsp;кислота&nbsp;четыри</p></div></body>

Основные варианты решения проблемы переноса слов в CSS
Сейчас вы сможете переносить при помощи CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них способами CSS – может и получиться, хотя мы сами не проверяли.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *