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

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

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

Overflow-wrap

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

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

Word-break

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

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

Hyphens

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

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

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

Цвет HR - как изменить в CSS

Апрель 27, 2017 г.

Горизонтальная линия HR - независимый HTML элемент - вызывает много вопросов у начинающих. Основная проблема - установка цвета. Установка стилей ...

Читать

Битые картинки vs CSS

Февраль 6, 2021 г.

Перефразируя устойчивое выражение: broken image happens. И раз уж они все равно могут появиться на вашем сайте, то с ними нужно что то делать, т.е. как ...

Читать

Переполнение текста (text-overflow)

Сентябрь 3, 2021 г.

Мы рассмотрим здесь как обрезать текст и добавить многоточие средствами CSS. Это еще одна классическая проблема фронт-енда, как не позволить тексту менять геометрию контейнера, если он не влазит целиком. CSS предоставляет специальное свойство для ...

Читать

Эффект, затрудняющий прочтение текста

Август 1, 2018 г.

Этот эффект я увидел на одном сайте, где авторы решили так оригинально бороться с пользователями ад-блокера. Дескать сайт живет за счет рекламы, а раз ...

Читать
 

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

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



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