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

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

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

Overflow-wrap

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

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

Word-break

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

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

Hyphens

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

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

Написать комментарий

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

Ошибка background-size:cover в Firefox при рендеринге svg

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

По какой то причине firefox не верно отрабатывает свойство background-size: cover для SVG. Чтобы воспроизвести попробуйте задать стили вроде: [crayon-62899b65756f8814814604/] Чтобы исправить ситуацию, вы можете заменить размер фона на следующий: ...

Читать

Делаем эффект параллакса для заднего фона на сайте

Октябрь 19, 2015 г.

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать

 

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

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



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