только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел и неразрывный дефис ‑). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. "Мягкий дефис" - проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то или переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре.
уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти-килограммовый корчеватель‐бульдозер‐погрузчик
lang="ru"
lang="ru"
>уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти-
килограммовый корчеватель‐бульдозер‐погрузчик
В чём состоит различие одно свойства от другого
По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.
Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим word-break: keep-all; .
Для того, чтобы браузер не обращал внимания и на мягкий дефис, вставляем hyphens: none; .
Если требуется перенос слов, то word-wrap: break-word; советую применять всегда, поскольку он понимается всеми браузерами. Он отличается от word-break: break-all; , которое является приоритетным, тем, что слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.
При совместном использовании word-break: break-all; с hyphens: auto; , последнее игнорируется. hyphens: auto; расставляет любые дефисы по своему усмотрению. Но для того, чтобы оно работало, нужно обозначить свой язык, указав в div атрибут lang="ru" .
Не переносить слова на другую строку
Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим "по умолчанию" и добавить . Нажмите на и посмотрите на наш полигон.
В отличие от текста в полиграфии, на веб-странице редко применяются переносы, поскольку мы не привязаны жёстко к формату бумаги. Сайты могут смотреть на разных мониторах, с разным разрешением, в разных операционных системах и браузерах. Всё это порождает такое сочетание комбинаций, что предугадать, как будет выглядеть конечный текст для пользователя невозможно. Из-за этого обычно текст выравнивается по левому краю, а переносы происходят словами целиком. Но всё же переносы слов в некоторых случаях нужны, например, когда применяются длинные химические или медицинские термины, в узких колонках заданной ширины, ради эстетики. В HTML и CSS ручных или автоматических способов добавления переносов не так уж и много, так что перечислю все.
Использование тега
Тег
введён в HTML5 и создаёт перенос слов при необходимости. В тех местах, где по правилам русского языка допустим перенос, вставляем
(пример 1). Если слово целиком помещается в отведённую ширину, этот тег никак себя не проявит и о его наличии мы даже не узнаем. Если слово не помещается, браузер в месте нахождения тега
создаёт перенос.
Пример 1. Тег
Переносы
Одиннадцатиклассница
Анжелика после окончания школы выбрала профессию
делопроизводительницы.
Применение
имеет серьёзный недостаток - понять, перенос перед нами или отдельное слово на другой строке, нельзя. Из-за этого может потеряться смысл предложения и его неправильно поймут. Переносы надо делать по правилам типографики, а именно: в конце строки добавлять дефис. С этим отлично справляется мягкий перенос, в коде HTML для него имеется спецсимвол -
. Он выполняет ту же роль, что и тег
- не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис (пример 2).
Пример 2. Мягкий перенос
Переносы
Один-надцатиклас-сница Анжелика
после окончания школы выбрала профессию
дело-произ-водитель-ницы.
Результат данного примера показан на рис. 2. Заметьте, насколько эстетичнее и понятнее стал выглядеть текст в сравнении с рис. 1.
Рис. 2. Текст с переносами слов
Свойство word-break
Чтобы автоматизировать процесс создания переносов воспользуйтесь свойством word-break
со значением break-all
(пример 3). Добавлять какие-либо символы или теги в HTML уже не придётся, всё берут на себя стили.
Пример 3. Применение word-break
Переносы
Одиннадцатиклассница Анжелика после окончания школы
выбрала профессию делопроизводительницы.
Результат данного примера показан на рис. 3. Правила переносов текста в этом случае не учитываются, поэтому слова могут переноситься весьма причудливым образом.
Рис. 3. Текст с переносами слов
Из всех перечисленных способов «полуручной» с использованием -
даёт наилучший результат - соблюдаются правила русского языка, текст выглядит наиболее эстетично. Пользуйтесь им, когда в тексте встречаются длинные слова.
Свойство hyphens
И, наконец, самое мощное и удобное свойство для автоматического добавления переносов - hyphens
. Его действие основано на встроенном в браузере словаре переносов, поэтому даёт наилучший результат. Поддерживается в IE10, Firefox, Android и iOS. Chrome и Opera не поддерживают. Чтобы это всё работало, для тега
добавляем атрибут lang
со значением ru
(пример 4).
Пример 4. Использование hyphens
Переносы
Одиннадцатиклассница Анжелика
после окончания школы выбрала профессию
делопроизводительницы.
Результат данного примера показан на рис. 4.
Рис. 4. Текст с переносами слов
Запрет переносов
Нередко возникает и обратная задача - запретить переносы в тех местах, где они по правилам языка недопустимы. Например, нельзя отрывать единицы измерения от числа (10 мл), обозначение года (54 до н. э.), инициалы от фамилии, разрывать устойчивые сокращения (т. д.) и др. Чтобы браузер не добавлял переносы в месте пробела, его следует заменить на неразрывный пробел (пример 5).
Пример 5. Использование
Переносы
Озеро по координатам
70° 58′ 19″ с. ш.
97° 24′ 5″ в. д.
расположено в Таймырском Долгано-Ненецком
районе Красноярского края России.
В данном примере для корректного написания координат используется , который не позволяет переносить текст.
Часто возникает потребность добавить новый абзац, но без пустой строки, которую вставляет тег абзаца
Для некоторых фрагментов текста принятые для абзацев стандартные интервалы просто неуместны. Это могут быть надписи под картинками и в таблицах, стихи, цитаты, сноски и примечания.
Для принудительного переноса строк предусмотрен специальный тег, функция которого заложена в его названии br (break row - "разорвать ряд, строку"). Тег языка гипертекстовой разметки html означает, что все следующее за ним содержимое должно начинаться с новой строки. Если нужно, можно проставить несколько тегов подряд, чтобы добиться необходимого интервала.
Тег не чувствителен к регистру и не требует закрывающего тега, потому что это пустой элемент, но лучше привыкать закрывать все теги. В XHTML тег разрыва должен быть "наглухо закрыт" на обратный слэш.
Пример использования тега разрыва
Тег br в действии < /title></p><p><р> Прогул на службе </р></p><p><p>Еще нигде и никогда <br></p><p>Я не был столь плохим <br></p><p>Начальства алчная орда <br></p><p>Грызет меня живым </р></p><p>Прогул на службе</p><p>Еще нигде и никогда<br>Я не был столь плохим.<br>Начальства алчная орда<br>Грызет меня живым.</p><h2>Атрибут тега <br></h2><p>Единственный атрибут, которым обладает <a href="/windows-7/kak-zadat-kratkoe-opisanie-stranicy-v-html-spravochnik-tegov-html-primer.html">html тег</a> <br>, называется Он указывает браузеру, как поступить с переносимой строкой, если тексту придется обтекать так называемый плавающий элемент, каковым может быть, например, изображение с атрибутом выравнивания align, использующим значения right/left, или блок в CSS, которому прописано свойство float.</p><p>В спецификациях по XHTML 1.0 / HTML 4.01 атрибут clear можно использовать только с Transitional, Frameset и <!DOCTYPE>, иначе код будет нерабочим.</p><h2>Свойства атрибута тега </h2><p>Эффект от применения атрибута clear зависит от его значения и расположения обтекаемого текстом плавающего элемента. Атрибут может принимать 4 значения:</p><p><br clear = "right | left | all | none"></p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/21147/458111.jpg' width="100%" loading=lazy></p><p>Значение left запрещает обтекание элемента, выровненного по левому краю, поэтому текст, "споткнувшись" о тег <br>, расположится ниже изображения или иного плавающего элемента.</p><p>Точно такой результат получится от использования аргумента all, который ни за что не позволит ни справа, ни слева.</p><p>Значение right запрещает тексту обтекание элемента, выровненного по правому краю, поэтому после тега <br> тексту не останется ничего другого, как обойти изображение, обтекая его справа.</p><p>Значение none ("ни вашим, ни нашим") вообще снимает все полномочия с атрибута clear, и тег <br> молча переносит строку вниз.</p><p>Значение по умолчанию, как таковое, у атрибута clear тега отсутствует.</p><h2>Тег <br> - это мягкий перенос</h2><p>Тег разрыва строки очень удобен для создания необходимых интервалов между абзацами, внутри которых он используется как мягкий перенос, но не как средство для деления текста на абзацы.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/21147/458084.jpg' width="100%" loading=lazy></p><p>Не следует слишком увлекаться тегом перевода строк для форматирования текста, потому что результаты его применения не всегда отличаются изяществом.</p><p>Например, если использовать тег <br> для перевода строк внутри абзаца, это может привести к появлению "гребенки" в окне пользователя, если оно меньше окна, на которое ориентировался веб-мастер.</p>
<p>Свойство white-space
устанавливает, как отображать пробелы между словами. В <a href="/game/xbox-nevozmozhno-otkryt-ispolzuya-vstroennuyu-uchetnuyu-zapis.html">обычных условиях</a> любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент <pre> , помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space
имитирует работу <pre>Но в отличие от него не меняет шрифт на моноширинный.</p><h2>Краткая информация</h2><h2>Обозначения</h2><table><tbody><tr><th>
</th><th>Описание
</th><th style="width: 130px">Пример
</th>
</tr><tr><td><тип>
</td><td>Указывает тип значения.
</td><td><размер>
</td>
</tr><tr><td>A && B
</td><td>Значения должны выводиться в указанном порядке.
</td><td><размер> && <цвет>
</td>
</tr><tr><td>A | B
</td><td>Указывает, что надо выбрать только одно значение из предложенных (A или B).
</td><td>normal | small-caps
</td>
</tr><tr><td>A || B
</td><td>Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
</td><td>width || count
</td>
</tr><tr><td>
</td><td>Группирует значения.
</td><td>[ crop || cross ]
</td>
</tr><tr><td>*
</td><td>Повторять ноль или больше раз.
</td><td>[,<время>]*
</td>
</tr><tr><td>+
</td><td>Повторять один или больше раз.
</td><td><число>+
</td>
</tr><tr><td>?
</td><td>Указанный тип, слово или группа не является обязательным.
</td><td>inset?
</td>
</tr><tr><td>{A, B}
</td><td>Повторять не менее A, но не более B раз.
</td><td><радиус>{1,4}
</td>
</tr><tr><td>#
</td><td>Повторять один или больше раз через запятую.
</td><td><время>#
</td>
</tr></tbody></table>×
<h2>Значения</h2><p>normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление <br>
переносит текст на <a href="/link/kak-pereiti-s-odnoi-stroki-na-druguyu-kak-pereiti-na-novuyu.html">новую строку</a>. pre Текст показывается с учётом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена <a href="/word/poyavilis-polosy-na-ekrane-noutbuka-chto-delat-ubiraem-na-ekrane.html">горизонтальная полоса</a> прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на <a href="/program/perehod-na-sleduyushchuyu-stroku-v-html-kak-dobavit-s-pomoshchyu-svoistv-css.html">следующую строку</a>, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку. </p><p>Действие значений на текст представлено в табл. 1.</p><h2>Пример</h2><p><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>white-space
Пример
Великая теорема Ферма X n
+ Y n =
Z n
где n - целое число > 2
