Перенос строки через дефис css

word — break

Что делать, если слово слишком длинное и не помещается в блок целиком?

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство word — break определяет, как будет переноситься на новую строку текст при достижении края родительского контейнера.

Пример

Скопировать ссылку «Пример» Скопировано

 p  word-break: normal;> p  word-break: normal; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

• normal — значение по умолчанию, длинные слова или строки с неразрывным пробелом не переносятся, даже если выходят за границы родительского блока.
• break — all — при достижении границы родительского блока перенос строки будет вставлен между любыми двумя символами.
• keep — all — перевод строки не будет использован в тексте на китайском, японском или корейском языках. Для текста на других языках будет применено normal .
• break — word (устаревшее) — разобьёт текст в любом месте, в том числе внутри слова, при достижении границы контейнера даже если доступен перенос по словам.

Свойство word — break можно глобально задать для всей страницы, добавив его в стили для селектора body .

Особенности переноса текста

Скопировать ссылку «Особенности переноса текста» Скопировано

Перенос текста в CSS происходит по определённым правилам, которые могут зависеть от языка и заданных CSS стилей (включает свойства word — break , line — break , white — space , text — align , text — justify и hyphens ). Вот некоторые правила из спецификации:

• Обязательные переносы: текст обязательно переносится на новую строку, если есть символы перевода строки (например, \n ).
• Мягкие переносы: это такие места, где текст переносится на новую строку, если он не умещается в текущей строке. Сюда относятся пробелы и другие символы-разделители. В некоторых языках между символами могут быть и другие мягкие переносы, которые зависят от языковых правил.
• Дефисы и слоги: в алфавитных языках, таких как английский и русский, слова могут быть разбиты на слоги и перенесены с использованием дефиса и языковых правил (кстати, язык определяется по HTML-атрибуту lang ). Автоматическим переносом слов с использованием дефиса управляет свойство hyphens .
• Особенности языка: некоторые языки имеют специфические правила переноса текста. В идеографических языках, таких как китайский, и слоговых языках, таких как корейский, перенос слов и разрыв строк происходит в других местах (например, между корейскими иероглифами может быть разрыв, даже если между ними нет пробела).

Когда определены возможные места переноса, подбирается подходящее место, учитывающее заданные стили. В случае с длинными словами, ссылками или другой последовательностью символов, которые не умещаются в одной строке, мы можем указать браузеру, как следует переносить текст, используя свойства overflow — wrap и word — break .

Также свойство word — break играет важную роль в CJK языках (китайский, японский и корейский): значение word — break : keep — all запрещает разрывать слова внутри CJK текста, где разрывы строк могут быть нежелательными между определёнными иероглифами.

На практике

Скопировать ссылку «На практике» Скопировано

Свойство word — break : break — all очень похоже на overflow — wrap : break — word по своей сути. Однако, есть некоторые различия в их работе.

Свойство word — break : break — all позволяет разрывать слова в любом месте, в том числе и в середине слова, чтобы уместить их в контейнере. С одной стороны, это можно привести к трудно читаемому тексту, с другой, такой перенос хорошо подходит для переноса длинных ссылок или, например, строк кода.

Свойство overflow — wrap : break — word пришло на смену word — wrap : break — word . Оно позволяет переносить длинные слова в любом месте, а не только посередине слова. Это означает, что браузер может добавить перенос слова в любом месте, если это позволяет уместить слово внутри контейнера. Это свойство также сохраняет целостность слов, если они могут поместиться внутри контейнера.

Источник

hyphens

CSS свойство hyphens указывает, как следует переносить слова через дефис, когда текст переносится на несколько строк. Оно может полностью запретить перенос, делать перенос в местах, заданных вручную или позволять браузеру автоматически расставлять переносы, где это необходимо.

Интерактивный пример

Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом lang , и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут xml:lang (en-US) .

Примечание: Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.

Синтаксис

/* Keyword values */ hyphens: none; hyphens: manual; hyphens: auto; /* Global values */ hyphens: inherit; hyphens: initial; hyphens: unset; 

Свойство hyphens задаётся как одно из ключевых значений, выбранного из списка ниже.

Значения

Слова не разрываются при переносе строки, даже если внутри слов указаны точки разрыва. Строки будут переноситься только по пробелам.

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

Браузер может автоматически разбивать слова в соответствующих точках переноса, следуя любым правилам, которые он выбирает. Однако предлагаемые возможности разрыва строки (смотреть Предлагаемые возможности разрыва строки ниже) переопределят автоматический выбор точки разрыва, если таковые имеются.

Примечание: Поведение параметра auto зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута lang , чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.

Предлагаемые возможности разрыва строки

Для указания потенциальных точек разрыва строки в тексте вручную используются два символа Unicode:

«Жёсткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис всё равно отображается.

Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте ­ для вставки мягкого дефиса.

Формальное определение

Формальный синтаксис

Источник

Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens)

По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.

Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим 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» .

Не переносить слова на другую строку

Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим «по умолчанию» и добавить white-space: pre; или white-space: nowrap;. Нажмите на white-space: nowrap; и посмотрите на наш полигон.

Управлять переносом слов при hyphens: auto;

Тетрагидропиранилциклопентилтетрагидропиридопиридиновые
 .hyphens < -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* пока поддерживает только Firefox */ text-align: justify; >.nohyphens

Источник