HTML перенос слов

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

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

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

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

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

  • Использование символа мягкого разрыва ­ — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после &shy, а после первой половины выводится знак переноса, похожий на дефис:

<body> <p>Пример сложного химического соединения и текста — метилпропенилендигидрок&shy;сициннаменилакрилическая кислота</p> </body>

  • Использование тега — элемент появился в HTML 5. Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте «разлома» знак переноса, что может негативно сказаться на читаемости всего текста:

<style type=»text/css»> wbr { display: inline-block; } </style> </head> <body> <p>метилпропенилен<wbr>дигидроксицинна<wbr>менилакрилическая кислота</p> </body> В некоторых браузерах поддержка тега <wbr> реализована некорректно. В них он будет работать, если для него в коде CSS прописано свойство display со значением inline-block.

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

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

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

Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. 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 свойство word-wrap было переименовано в overflow-wrap. Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:

Как видно на расположенном выше скриншоте, новое свойство поддерживается 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>

  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 можно реализовать несколькими способами:

  • С помощью неразрывного пробела &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 – может и получиться, хотя мы сами не проверяли.

Еще не голосовали рейтинг из ХорошоПлохо Ваш голос принят

Мягкий перенос

Применение <wbr> имеет серьёзный недостаток — понять, перенос перед нами или отдельное слово на другой строке, нельзя. Из-за этого может потеряться смысл предложения и его неправильно поймут. Переносы надо делать по правилам типографики, а именно: в конце строки добавлять дефис. С этим отлично справляется мягкий перенос, в коде HTML для него имеется спецсимвол &shy;. Он выполняет ту же роль, что и тег <wbr> — не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис (пример 2).

Пример 2. Мягкий перенос

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Переносы</title> <style> .word { width: 160px; background: #f0f0f0; border: 1px solid #333; padding: 10px; font-size: 18px; } </style> </head> <body> <p class=»word»>Один&shy;надцатиклас&shy;сница Анжелика после окончания школы выбрала профессию дело&shy;произ&shy;водитель&shy;ницы.</p> </body> </html>

Результат данного примера показан на рис. 2. Заметьте, насколько эстетичнее и понятнее стал выглядеть текст в сравнении с рис. 1.

Рис. 2. Текст с переносами слов

Свойство word-break

Чтобы автоматизировать процесс создания переносов воспользуйтесь свойством word-break со значением break-all (пример 3). Добавлять какие-либо символы или теги в HTML уже не придётся, всё берут на себя стили.

Пример 3. Применение word-break

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Переносы</title> <style> .word { width: 160px; background: #f0f0f0; border: 1px solid #333; padding: 10px; font-size: 18px; word-break: break-all; } </style> </head> <body> <p class=»word»>Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.</p> </body> </html>

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

Рис. 3. Текст с переносами слов

Из всех перечисленных способов «полуручной» с использованием &shy; даёт наилучший результат — соблюдаются правила русского языка, текст выглядит наиболее эстетично. Пользуйтесь им, когда в тексте встречаются длинные слова.

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

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