|  в избранное  |  e-mail  |  печать |

логотип компании Sundries это просто наша работа  +7 927·241·97·35 , +7 919·686·71·32


Переносы слов


В отличие от текста в полиграфии, на веб-странице редко применяются переносы, поскольку мы не привязаны жёстко к формату бумаги. Сайты могут смотреть на разных мониторах, с разным разрешением, в разных операционных системах и браузерах. Всё это порождает такое сочетание комбинаций, что предугадать, как будет выглядеть конечный текст для пользователя невозможно. Из-за этого обычно текст выравнивается по левому краю, а переносы происходят словами целиком. Но всё же переносы слов в некоторых случаях нужны, например, когда применяются длинные химические или медицинские термины, в узких колонках заданной ширины, ради эстетики.

Использование тега <wbr> для жёсткого переноса


фото примера 1 Тег <wbr> предназначен для переноса слова, если оно не помещается целиком в отведённую ширину. Вставляем <wbr> (пример 1) в те места, где по пра­вилам русского языка допустим перенос. Если слово не помещается, браузер в месте нахождения тега <wbr> создаёт перенос. Если же слово помещается целиком, этот тег никак себя не проявляет визуально, словно его нет. При расстановке переносов после дефисов он просто незаменим.

Пример 1. Тег <wbr>

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

Мягкий перенос при помощи спецсимвола &shy;


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

Пример 2. Символ &shy;

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

Автоматизация переноса через cвойство word-break


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

Пример 3. Свойство word-break

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

Автоматизация переноса через cвойство hyphens


фото примера 4 Свойство hyphens самое мощное и удобное для автоматического добавления переносов. Его действие основано на встроенных в браузерах словарях переносов, поэтому даёт наилучший результат. Поддерживается в IE10, Firefox, Android и iOS. Chrome и Opera не поддерживают. Чтобы это всё работало, необходимо для тега <html> добавить атрибут lang со значением ru (пример 4).

Пример 4. Свойство hyphens

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

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


Нередко возникает и обратная задача – запретить переносы в тех местах, где они по правилам языка недопустимы. Например, нельзя отрывать единицы измерения от числа (10 мл), обозначение года (54 до н. э.), инициалы от фамилии, разрывать устойчивые сокращения (т. д.) и др. Чтобы браузер не добавлял переносы в месте пробела, его следует заменить на специальный символ неразрывного пробела – &nbsp;.

10&nbsp;мл воды в году 54&nbsp;до&nbsp;н.&nbsp;э. и т.&nbsp;д.

Для статьи использовалась информация с сайта htmlbook.ru