Перенос текста в html: Переносы слов | htmlbook.ru — Вебджем.рф

Содержание

Переносы слов | htmlbook.ru

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

Использование тега

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

Пример 1. Тег

<!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>Один<wbr>надцатиклас<wbr>сница 
  Анжелика после окончания школы выбрала профессию 
  дело<wbr>произ<wbr>водитель<wbr>ницы.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

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

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

Применение имеет серьёзный недостаток — понять, перенос перед нами или отдельное слово на другой строке, нельзя. Из-за этого может потеряться смысл предложения и его неправильно поймут. Переносы надо делать по правилам типографики, а именно: в конце строки добавлять дефис. С этим отлично справляется мягкий перенос, в коде HTML для него имеется спецсимвол . Он выполняет ту же роль, что и тег — не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис (пример 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>Один&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>Одиннадцатиклассница Анжелика после окончания школы
  выбрала профессию делопроизводительницы.</p>
 </body>
</html>

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

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

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

Свойство hyphens

И, наконец, самое мощное и удобное свойство для автоматического добавления переносов — 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>
   .word { 
    width: 160px; 
    background: #f0f0f0;
    border: 1px solid #333;
    padding: 10px;
    font-size: 18px;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
   }
  </style>
 </head>
 <body>
  <p>Одиннадцатиклассница Анжелика 
  после окончания школы выбрала профессию 
  делопроизводительницы. </p>
 </body>
</html>

Результат данного примера показан на рис. 4.

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

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

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

Пример 5. Использование  

<!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>Озеро по координатам
   70°&nbsp;58′&nbsp;19″&nbsp;с.&nbsp;ш.
  97°&nbsp;24′&nbsp;5″&nbsp;в.&nbsp;д. 
   расположено в Таймырском Долгано-Ненецком 
   районе Красноярского края России.</p>
 </body>
</html>

В данном примере для корректного написания координат используется  , который не позволяет переносить текст.

текст

CSS по теме

hyphens
word-break

Статьи по теме

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

OnLine Hyphenation. Автоматический перенос слов в тексте и в html страницах

Добавить RSS ленту | Новый поиск | О нас

OnLine Hyphenator.

Автоматический перенос слов

Вы когда-нибудь обращали внимание на то, что практически на всех сайтах в тексте отсутствуют переносы и из-за этого статьи, новости и другой контент выглядят не строгой симпатичной колонкой, а неровным блоком c кривым правым краем?
Теперь Вам доступна система расстановки переносов. Достаточно поместить текст в окно, нажать кнопку «генерировать», и система сама расставит переносы в нужных местах. При этом переносы будут расставляться автоматически даже при изменении размера окна, в котором демонстрируется содержимое.

Вы хотели бы использовать эту систему в вашей cms? Свяжитесь с нами! [email protected]


Символ переноса :	Язык :	Тип текста :	Выравнивание текста :

	CzechDutchEnglishFrenchGermanPolishRussian	ТекстHTML	Не изменятьПо левому краюПо центруПо правому краюПо ширине

Вставьте ваш текст в поле ввода, нажимте на кнопку «Генерировать текст»

Текст для обработки



Расставить переносы на вашем сайте / Демо-режим Посмотрите, как может выглядеть ваша статья на сайте или запись в блоге с правильно расставленными переносами! Вставьте URL вашего сайта в поле, нажмите на «Hyphenate URL» и вы получите результат.

Введите URL сайта для демонстрации

Свойство разрыва слов CSS

❮ Назад Полное руководство по CSS Далее ❯

Пример

Разрыв слов на любом символе:

в год {
word-break: break-all;
}

Попробуйте сами »

Определение и использование

Свойство word-break указывает, как слова должен прерываться при достижении конца строки.

Показать демо ❯

Значение по умолчанию:	обычный
Унаследовано:	да
Анимация:	нет. Читать о анимированном
Версия:	CSS3
Синтаксис JavaScript:	объект .style.wordBreak=»сломать все» Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
разрыв слова	4,0	5,5	15,0	3.1	15,0

Синтаксис CSS

Значения свойств

Значение	Описание	Демо
обычный	Значение по умолчанию. Использует правила разрыва строки по умолчанию
универсальный	Во избежание переполнения слово может быть разбито на любом символе	Демонстрация ❯
хранить все	Разрывы слов не следует использовать для текста на китайском, японском и корейском языках (CJK). Поведение текста, отличного от CJK, такое же, как и при значении «нормальный»	Демо ❯
ключевое слово	Во избежание переполнения слово может быть разбито в произвольных точках	Демонстрация ❯
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

❮ Предыдущий Полное руководство по CSS Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.

CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
60002 9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Обтекание текста и разрыв слов в HTML

Поиск

7 октября 2019 г.

Вы когда-нибудь хотели использовать сверхдлинное слово, такое как supercalifragilisticexpialidocious, в статье на веб-странице, но не делали этого, потому что оно было слишком длинным, и вы не хотели напортачить перенос слов? Было бы суперкалифрагилистически-экспериментально, иметь возможность использовать такие длинные слова и знать, что упаковка не будет проблемой. Реальность такова, что HTML предоставляет тег, который позволяет вам переносить слова посередине, сообщая браузеру, где слово может быть разбито!

HTML-тег wbr используется для указания места разрыва строки. Обратите внимание, что тег wbr не указывает на разрыв, а является просто индикатором того, что если разрыв необходим, то местоположение тега wbr является приемлемым местом для разрыва. Этот атрибут обычно используется в местах, которые в противном случае не использовались бы для разрывов строк, например, в середине слова.

HTML Magic

В случае supercalifragilisticexpialidocious тег wbr может быть добавлен между каждым слогом или просто в паре мест, если нужны разрывы. Ниже показан фрагмент HTML-кода с использованием тега:

<дел>

Тег wbr суперкалифрагилистическийexpialidocious!

Тег wbr суперcaliхрупкийexpialiблагоразумный!

Когда вы отобразите это в своем браузере, вы увидите, что одно и то же предложение отображается дважды:

Однако волшебство происходит, когда вы уменьшаете ширину окна браузера или просматриваете страницу на мобильное устройство с окном браузера уменьшенной ширины.

Затем вы увидите, что вторая строка переносится намного лучше, чем первая:

Вы можете подумать, что это не очень полезный тег, потому что вы вряд ли будете использовать слово supercalifragilisticexpialidocious или другие очень длинные слова на своих веб-страницах. Хотя это правда, есть вероятность, что вы будете использовать другие длинные текстовые строки, например URL-адрес сайта.

Тег wbr полезен при перечислении длинных URL-адресов на веб-страницах. Тег wbr также может указывать места, где можно разбить URL-адрес! Хотя URL-адрес будет переноситься в некоторых точках пунктуации и символов, бывают случаи, когда вам нужно лучше контролировать разрыв. Например, не все браузеры будут переносить точку в ULR. Для тех, кто это делает, URL-адрес будет переноситься после точки, что может сделать его похожим на конец предложения, когда URL-адрес встроен в текст. Чтобы избежать этого, вы можете добавить тег wbr перед точками в URL-адресе. Ниже показан фрагмент кода, иллюстрирующий это:

Перенос текста в html: Переносы слов | htmlbook.ru