Переноси слів

<час datetime="2013-08-14T11:58:38">14.08.2013

Влад Мержевич

На веб-сторінках рідко використовують переноси тексту через різні умови перегляду. Тому текст зазвичай вирівнюється по лівому краю, а переноси відбуваються словами цілком. Але іноді переноси потрібні, наприклад, для довгих хімічних або медичних термінів, у вузьких колонках або заради естетики. Існує декілька способів додавання переносів у HTML і CSS.

Використання тега <wbr>

Тег <wbr> дозволяє робити переноси слів за потребою. Якщо слово вміщується у відведену ширину, тег не впливає на вигляд. Якщо слово не поміщається, браузер додає перенос.

Приклад 1. Тег <wbr>

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

Результат показаний на малюнку 1.

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

Для зрозуміння місця переносу можна використовувати м'який перенос, який додає дефіс у кінці слова на новому рядку.

Приклад 2. М'який перенос

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

Результат показаний на малюнку 2. Дивно, наскільки краще виглядає текст порівняно з малюнком 1.

Властивість word-break

Для автоматичного додавання переносів використовуйте властивість word-break зі значенням break-all.

Приклад 3. Використання word-break

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

Результат показаний на малюнку 3.

Заборона переносів

Іноді потрібно заборонити переноси в певних місцях, наприклад, щоб числа не розділялись. Для цього можна використати нерозривний пробіл &nbsp;.

Приклад 5. Використання &nbsp;

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переноси</title>
  <style>
   .слово { 
    width: 160px; 
    background: #f0f0f0;
    border: 1px solid #333;
    padding: 10px;
    font-size: 18px;
   }
  </style>
 </head>
 <body>
  <p class="слово">Озеро по координатам
   70°&nbsp;58′&nbsp;19″&nbsp;с.&nbsp;ш.
   97°&nbsp;24′&nbsp;5″&nbsp;в.&nbsp;д. 
   расположено в Таймырском Долгано-Ненецком 
   районе Красноярского края  .</p>
 </body>
</html>

Часті запитання