И снова переносы в CSS

Да, вновь тема переносов, т.к. я уже писал небольшую статью, но еще раз возвращаюсь к данной теме с некоторыми новыми подробностями. Итак — разрыв слова, перенос текста на новую строку — рассмотрим, какие директивы даёт нам CSS для управления поведением верстки.

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

Overflow-wrap

Это то же самое свойство, что и word-wrap. Ранее оно было реализовано под этим (word-wrap) именем во многих браузерах, не являясь часть спецификации CSS. В CSS3 его включили под новым именем, но браузеры поддерживают оба названия.

Для совместимости со старыми браузерами можно указывать оба:

Word-break

Задаёт правило разрыва (или переноса) слова. Значение break-all позволяет переносить в любом месте и определено стандартом. А более интеллектуальное — break-word, при котором браузер пытается подобрать более удачное место для переноса, стандартом не определено.

Потому приходится задавать их в следующем порядке:

Hyphens

Дефисы делают разрыв более аккуратным и естественным. Однако, в текущий момент свойство поддерживается только safari и firefox.

Вставка дефиса опирается на язык документа (свойство lang тега html).

Мало букафф? Читайте есчо !

Как работает position: sticky с bottom: 0 и почему он "не работает"

Август 6, 2025 г.

Иногда кажется, что position: sticky работает только с top. Указываешь bottom: 0 — и ничего не происходит. Особенно, если пытаешься сделать так, чтобы элемент "прилип" к нижней границе контейнера при прокрутке. Почему так? На деле position: sticky ...

Читать

Автомасштабирование изображений

Сентябрь 16, 2015 г.

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

Читать

Меняем оформление input checkbox с помощью CSS

Декабрь 27, 2017 г.

Оформление элементов формы - это старая проблема. Ситуация несомненно улучшается, но финала пока не видно. С появлением псевдо-контейнеров :after и :before ...

Читать

100% высоты для дочернего flex контейнера

Сентябрь 10, 2024 г.

Flex опирается на другие принципы нежели блочные контейнеры, и иной раз не понятно какими свойствами управляется дочерний контейнер во flex родителе. Рассмотрим пример, когда у нас есть flex контейнер с двумя дочерними элементами. [crayon-68b0a487b021d587761603/] ...

Читать
 

Комментарии к «И снова переносы в CSS»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: