Переносы слов
В отличие от текста в полиграфии, на веб-странице редко применяются переносы, поскольку мы не привязаны жёстко к формату бумаги. Сайты могут смотреть на разных мониторах, с разным разрешением, в разных операционных системах и браузерах. Всё это порождает такое сочетание комбинаций, что предугадать, как будет выглядеть конечный текст для пользователя невозможно. Из-за этого обычно текст выравнивается по левому краю, а переносы происходят словами целиком. Но всё же переносы слов в некоторых случаях нужны, например, когда применяются длинные химические или медицинские термины, в узких колонках заданной ширины, ради эстетики. В HTML и CSS ручных или автоматических способов добавления переносов не так уж и много, так что перечислю все.
Использование тега
Тег введён в HTML5 и создаёт перенос слов при необходимости. В тех местах, где по правилам русского языка допустим перенос, вставляем (пример 1). Если слово целиком помещается в отведённую ширину, этот тег никак себя не проявит и о его наличии мы даже не узнаем. Если слово не помещается, браузер в месте нахождения тега создаёт перенос.
Переносы .word
Результат данного примера показан на рис. 1.
Рис. 1. Текст с переносами слов
Мягкий перенос
Применение имеет серьёзный недостаток — понять, перенос перед нами или отдельное слово на другой строке, нельзя. Из-за этого может потеряться смысл предложения и его неправильно поймут. Переносы надо делать по правилам типографики, а именно: в конце строки добавлять дефис. С этим отлично справляется мягкий перенос, в коде HTML для него имеется спецсимвол . Он выполняет ту же роль, что и тег — не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис (пример 2).
Пример 2. Мягкий перенос
Переносы .word
Результат данного примера показан на рис. 2. Заметьте, насколько эстетичнее и понятнее стал выглядеть текст в сравнении с рис. 1.
Рис. 2. Текст с переносами слов
Свойство word-break
Чтобы автоматизировать процесс создания переносов воспользуйтесь свойством word-break со значением break-all (пример 3). Добавлять какие-либо символы или теги в HTML уже не придётся, всё берут на себя стили.
Пример 3. Применение word-break
Переносы .word
Результат данного примера показан на рис. 3. Правила переносов текста в этом случае не учитываются, поэтому слова могут переноситься весьма причудливым образом.
Рис. 3. Текст с переносами слов
Из всех перечисленных способов «полуручной» с использованием даёт наилучший результат — соблюдаются правила русского языка, текст выглядит наиболее эстетично. Пользуйтесь им, когда в тексте встречаются длинные слова.
Свойство hyphens
И, наконец, самое мощное и удобное свойство для автоматического добавления переносов — hyphens . Его действие основано на встроенном в браузере словаре переносов, поэтому даёт наилучший результат. Поддерживается в IE10, Firefox, Android и iOS. Chrome и Opera не поддерживают. Чтобы это всё работало, для тега добавляем атрибут lang со значением ru (пример 4).
Пример 4. Использование hyphens
Переносы .word
Результат данного примера показан на рис. 4.
Рис. 4. Текст с переносами слов
Запрет переносов
Нередко возникает и обратная задача — запретить переносы в тех местах, где они по правилам языка недопустимы. Например, нельзя отрывать единицы измерения от числа (10 мл), обозначение года (54 до н. э.), инициалы от фамилии, разрывать устойчивые сокращения (т. д.) и др. Чтобы браузер не добавлял переносы в месте пробела, его следует заменить на неразрывный пробел (пример 5).
Пример 5. Использование
Переносы .word
В данном примере для корректного написания координат используется , который не позволяет переносить текст.
Расстояние между строками, HTML перенос строки
Тег
осуществляет перенос строки, разбивает строку:
| Тег <br /> осуществляет перенос, то есть текст, |
Тег
осуществляет перенос, то есть текст,
размещенный за ним, будет отображен с новой строки.
Увеличим расстояние между строками по вертикали:
| Тег <br /> осуществляет перенос, то есть текст, размещенный за ним, будет отображен с новой строки. |
Тег
осуществляет перенос, то есть текст,
размещенный за ним, будет отображен с новой строки.
Н е злоупотребляйте тегом
для увеличения расстояния между строками:
Увеличить расстояние между строками текста вам помогут CSS уроки.
HTML перенос слов
Возможно ли в HTML реализовать перенос слов
HTML перенос слов какими-либо тегами осуществить не удастся, а пользоваться вспомагательным кодом нет смысла, потому что результат будет отображен далеко не во всех браузерах, то есть не будет соблюдена его кросс-браузерность. Перенос слов можно производить вручную, но результат не понравится ни вам, ни вашим посетителям, потому как наличие большого количества черточек в тексте страницы не делают его привлекательным. Оставьте идею переноса слов – экономьте свое драгоценное время.
Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
HTML текст справа 
HTML перенос строки 
HTML теги параграфов
© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | HTML перенос строки, слов? – Не вопрос!
Свойство white-space
Свойство white-space устанавливает как переносить текст на новую строку, а также как отображать пробелы между словами и переносы строк (места, где был нажат Enter при наборе кода).
Синтаксис
Значения
| Значение | Описание |
|---|---|
| nowrap | Запрещает тексту переносится на другую строку, даже если он не помещается в ширину контейнера (в этом случае текст просто вылезет за его границы). Однако, добавление тега br заставит текст перенестись на новую строку. |
| pre | Текст показывается так, как был набран в блокноте при верстке сайта: со всеми пробелами и enter-ами (если в коде набрано несколько пробелов — на экране тоже будет несколько). При этом браузер не будет переносить текст на новую строку, если он не помещается в контейнер — текст просто вылезет за его границы. Аналог тега pre, но в отличие от него не меняет шрифт на моноширинный (про моноширинный шрифт см. свойство font-family . |
| pre-wrap | То же самое, что и pre, отличие в том, что если текст слишком длинный и не влазит в контейнер — браузер перенесет его на другую строку. |
| pre-line | Браузер учитывает только Enter-ы в HTML коде и игнорирует все остальное (несколько пробелов будут выглядеть как один, браузер сам расставляет разрывы строк). |
| normal | Стандартное поведение: браузер сам расставляет разрывы строки так, чтобы слова поместились в контейнер. Несколько пробелов в коде будут выглядеть как один на экране. |
Значение по умолчанию: normal .
Пример . Значение nowrap
В данном примере текст не поместится в контейнер и вылезет за его границы, так как задано значение nowrap :
#elem < width: 200px; white-space: nowrap; border: 1px solid red; >
Пример . Значение nowrap и тег br
Если добавить тег br — текст перенесется на новую строку (именно в том месте, где стоит br ):
amet, consectetur adipiscing elitorire.
#elem < width: 200px; white-space: nowrap; border: 1px solid red; >
Пример . Значение pre
В данном примере текст показывается так, как был набран в редакторе HTML кода (со всеми отступами клавишей Tab , с Enter и так далее):
#elem < width: 200px; white-space: pre; border: 1px solid red; >
Пример . Значение pre-wrap
А сейчас текст показывается так, как был набран в редакторе HTML кода, однако, вылезающие части переносятся на новую строку:
#elem < width: 200px; white-space: pre-wrap; border: 1px solid red; >
Смотрите также
- свойства word-break и overflow-wrap ,
которые позволяют перенести буквы длинного слова на новую строку - свойство tab-size ,
которое устанавливает размер отступа, созданного клавишей Tab - свойство hyphens ,
которое включает переносы слов по слогам - свойство overflow ,
которое обрезает вылезающие за границу блока части - тег pre ,
который показывает текст так, как он был набран в редакторе HTML кода
Как перенести текст html
Тег <br> — это одинарный тег (т.е нет закрывающегося тега) Он говорит системе о том, что всё, что после него нужно переносить на новую строку.
2.Горизонтальная линейка (линия)
Тег <hr> — это одинарный тег (т.е нет закрывающегося тега) Он говорит системе о том, что нужно использовать горизонтальную линию сверху или снизу.
3.Комментарий
Комментарии на html странице необходимы для того чтобы быстро вспомнить что, где находится на странице. Если html кода очень много, бывает трудно вспомнить каждый блок. Поэтому необходимо оставлять комментарии.
Комментарий открывается < ! — — далее пишется текст комментария и затем закрывается с помощью — — >. Но если написать комментарий в теге <title></title> то комментарий будет показан в заголовке страницы. Во всех остальных случаях браузер будет игнорировать этот кусок кода.
Пробуйте всё прописать руками. Тогда вы лучше запомните и будете помнить, где и как их применить.
Практическое задание 1
Переносы строк
<html>
<body>
<p>Это <br>пара<br>граф с переносами строк</p>
</body>
</html>
Сохраните файл под именем 5br.html
Практическое задание 2
Горизонтальная линейка
<html>
<body>
<p>Этот параграф отобразится сверху горизонтальной полосы.</p>
<hr>
<p>Этот параграф отобразится снизу горизонтальной полосы.</p>
</body>
</html>
Сохраните файл под именем 6hr.html
Практическое задание 3
Комментарии в HTML
<html>
<body>
Этот текст будет показан в окне браузера.
<!— Этот текст не будет показан, это комментарий. —>
</body>
</html>
Сохраните файл под именем 7com.html
Дополнительные задания:
1.Перенос строк
<html>
<body>
<p>
Чтобы выполнить перенос<br>строк<br>в
<br>параграфе,<br>используйте тег br.</p>
</body>
</html>
Сохраните файл под именем 8br.html
<html>
<body>
<p>
В лесу родилась елочка.
В лесу она росла.
Зимой и летом стройная,
Зеленая была.
</p>
<p>Обратите внимание, что браузер просто проигнорировал использованное форматирование!</p>
</body>
</html>
Сохраните файл под именем 9p.html
2.Горизонтальная линейка
<html>
<body>
<p>Тег <hr> определяет горизонтальную линейку :</p>
<hr>
<p>Это параграф</p>
<hr>
<p>Это параграф</p>
</body>
</html>
Сохраните файл под именем 10hr.html
3.Комментарий
<!—Этот комментарий выводиться не будет—>
<p>Это обычный параграф.</p>
Сохраните файл под именем 11com.html