Кроссбраузерный перенос строк

Чтобы управлять переносами строк, когда они не помещаются по ширине в заданную область, можно использовать кроссбраузерную комбинацию word-wrap и white-space.

Свойство word-wrap носит черновой характер и при валидации документа на CSS 3 выдает ошибку.

Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег <pre>, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу тега <pre>, но в отличие от него не меняет шрифт на моноширинный.

div {
    white-space: pre;         /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line;   /* CSS 2.1/3 */
    white-space: -moz-pre-wrap !important; /* Mozilla */
    white-space: -hp-pre-wrap;   /* HP printers */
    white-space: -o-pre-wrap;     /* Opera 7 */
    white-space: -pre-wrap;       /* Opera 4-6 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Ссылки

Источник: https://www.kobzarev.com/makeup/cross-browser-wrapping/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: