Да, вновь тема переносов, т.к. я уже писал небольшую статью, но еще раз возвращаюсь к данной теме с некоторыми новыми подробностями. Итак — разрыв слова, перенос текста на новую строку — рассмотрим, какие директивы даёт нам CSS для управления поведением верстки.
Отметим, что не все директивы являются общепринятым стандартом, нужно об этом помнить, постоянно сверяясь с областью применения того или иного CSS свойства.
Overflow-wrap
Это то же самое свойство, что и word-wrap. Ранее оно было реализовано под этим (word-wrap) именем во многих браузерах, не являясь часть спецификации CSS. В CSS3 его включили под новым именем, но браузеры поддерживают оба названия.
Для совместимости со старыми браузерами можно указывать оба:
|
1 2 |
overflow-wrap: break-word; word-wrap: break-word; |
Word-break
Задаёт правило разрыва (или переноса) слова. Значение break-all позволяет переносить в любом месте и определено стандартом. А более интеллектуальное — break-word, при котором браузер пытается подобрать более удачное место для переноса, стандартом не определено.
Потому приходится задавать их в следующем порядке:
|
1 2 3 4 5 6 |
-ms-word-break: break-all; word-break: break-all; word-break: break-word; |
Hyphens
Дефисы делают разрыв более аккуратным и естественным. Однако, в текущий момент свойство поддерживается только safari и firefox.
Вставка дефиса опирается на язык документа (свойство lang тега html).
|
1 2 3 4 |
-ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; |