Типографика в вёрстке
В ЦСС есть два подхода к управлению переносом слов: механический и «эстетический». В первом случае мы просим браузер механически перенести слово ровно на той букве, где слово перестало влезать в строку. Во втором случае мы автоматически или вручную расставляем в словах мягкие переносы, чтобы браузер аккуратно перенёс по ним слова, используя дефисы.
Типографика в вёрстке
Механический перенос слов
Чтобы механически переносить длинные слова или ссылки, вылезающие за полосу набора, используют устаревающее свойство word-break или современное overflow-wrap:
Самое длинное существительное без дефиса — водогрязеторфопарафинолечение. А по сути — это просто лечение грязью, торфом и парафином.
Самое длинное существительное без дефиса — водогрязеторфопарафинолечение. А по сути — это просто лечение грязью, торфом и парафином.
word-break: break-all переносит каждое слово, а overflow-wrap: break-word переносит только слова, не влезающие в строкуЧтобы подсказать браузеру, где лучше переносить слова, используют тег <wbr>. Если же перенос наоборот нужно запретить, например, в имени и фамилии, используют неразрывные пробелы и дефисы или заклинание white-space: nowrap:
<p>
https://this<wbr>.is<wbr>
.a<wbr>.really<wbr>.really<wbr>
.long<wbr>.website<wbr>
.name/with<wbr>/deeper<wbr>/pages
</p>
<p>
Михаил <span style="white-space: nowrap">Салтыков-Щедрин</span>
</p>https://this
Михаил Салтыков‑Щедрин
Эстетический перенос слов
Чтобы аккуратно переносить слова с помощью дефисов, используют свойство hyphens с ключевыми словами manual (переносить только там, где сказано) и auto (переносить автоматически).
Важный момент: автоматические переносы основаны на словарях и правилах деления слов на слоги, поэтому без указания языка документа (<html lang="ru">) переносы не работают.
Встроенный автоматический перенос слов браузером даёт непредсказуемый и не всегда удачный результат, который отличается от браузера к браузеру, поэтому обычно используют hyphens: manual с «подсказками»:
hyphens: auto
Самое длинное существительное без
Кофеварка и соковыжималка прекрасны.
hyphens: manual
Самое длинное существительное без
Кофеварка и соковыжималка прекрасны.
Чтобы подсказать браузеру, где лучше перенести слово, используют невидимые мягкие переносы (­). Их расставляют в тексте вручную или с помощью готовых библиотек и программ:
<p>
Самое длинное суще­стви­тель­ное
без дефиса – водо­грязе­торфо­парафино­лечение.
</p>Если уже расставленные переносы нужно запретить, например, при переходе от мобильной версии к лаптопной или горизонтальной, достаточно hyphens: none.
P. S. Слова с дефисом браузеры могут автоматически переносить по дефису. Чаще всего такие переносы — зло, потому что мешают читать и воспринимать слово целиком: 22‑й, Поток‑2, 555‑33‑92 или военно‑морской. В таких случаях стоит заменять обычный дефис на неразрывный ‑.
P. P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.