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

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

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

Overflow-wrap

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

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

Word-break

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

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

Hyphens

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

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

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

Простые CSS анимации, которые оживят ваш сайт

Апрель 14, 2025 г.

Иногда даже одно лёгкое движение может сделать сайт запоминающимся. Не нужно быть мастером фронтенда, чтобы добавить немного магии в интерфейс — иногда достаточно пары строк CSS. Простые анимации делают сайт динамичным, визуально приятным и интуитивно ...

Читать

Пропорциональное заполнение контейнера картинкой

Ноябрь 29, 2017 г.

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

Читать

Текст style CSS

Март 31, 2016 г.

Если вы решили разобраться как устроены документы в Интернет, тогда сразу после знакомства с гипертекстовой разметкой (HTML), вам нужно освоить каскадные ...

Читать

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

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

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

Читать
 

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

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



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