Мой вольный перевод статьи Луи Лазариса. Возможно тем, кто регулярно перечитывает спецификации, эта тема уже давно знакома, но я впервые вижу (кроме text-overflow) эти свойства. Поэтому, думаю, статья заинтересует и большинство других. Примерно полтора года назад я писал о свойстве word-wrap. В статье говорилось том, что это новое свойство, которое есть в CSS3 и отсутствует в CSS 2.1, и что оно поддерживается почти всеми браузерами, включая старые IE. Ну что ж, теперь все изменилось. Я это заметил, пока проводил исследования для своего сайта CSS3 Click Chart. Свойство word-wrap было удалено из спецификации CSS3, а вместо него туда добавили другие схожие свойства. Text-Wrap Свойство text-wrap "определяет режим обтекания текстом". Ну что ж, это описание нам мало о чем говорит, так что давайте присмотримся внимательней к параметрам свойства. normal Параметр по умолчанию для text-wrap. Это то, что мы видим когда не заданы никакие параметры обтекания текста. Обычный элемент с текстом внутри. none Браузеру сообщают, что текст в этом элементе не должен переноситься вообще. Так что если текст достигает конца родительского контейнера, он будет его переполнять и любые overflow-настройки будут обрабатывать видимость текста. avoid Это значение будет по прежнему разрешать разрывы строки, но оно "говорит" браузеру, чтобы тот был избирательным в том, где случаются разрывы. Прекрасный пример приведен в спецификации в данном разделе, который в основном показывает, что браузер будет интерпретировать части разметки, чтобы решить, где можно и где нельзя её разрывать. Поддержка браузеров: пока нет. Overflow-Wrap Свойство overflow-wrap сейчас пришло на замену устаревшего word-wrap. Его параметрами являются значения "normal" или "break-word" - те же значения, что были у word-wrap. Это свойство, как и его предок, вызывает, как это называет спецификация, "вынужденную обёртку". Спецификация объясняет: "Это свойство определяет будет ли перенос осуществляться внутри слова, чтоб предотвратить переполнение, когда строка слишком длинная и не помещается внутри строчного элемента." Спецификация также поясняет, что если text-wrap принимает значение "none", то свойство overflow-wrap не будет иметь никакого эффекта. Кроме того, слово не будет иметь переноса. Подробнее о переносах далее. Поддержка браузеров: пока нет. Line-Break и Word-Break Согласно спецификации, эти два свойства были введены для того, чтобы помочь справиться с проблемами, которые возникают у браузеров при при условии, что строки и слова нужно разбить так, как это принято в английском языке. Например, в английском браузер не будет ломать слово в строке в каком-нибудь другом месте, кроме как в том, где есть пробел либо некоторые знаки препинания. Но в других языках эти правила пока не применяются. Как говорится в спецификации: "Хотя в английском и можно переносить строки в местах пробелов либо знаков препинания, но не все языки имеют пробелы и знаки препинания." В этих системах письменности "возможность разрыва строки основана на границах символа, а не слова". Таким образом от разрыва строк приходится отказываться в определенных комбинациях символов. Если честно, я не совсем понимаю все значения этих свойств, поэтому я не буду описывать их, дабы не вводить в заблуждение. Поддержка браузерами: пока нет. Text-Overflow Свойство text-overflow определяет, как обрабатывать текст, который выходит за пределы родителя, когда для родителя задано какое-то иное значение переполнения, отличное от overflow: visible. Оно принимает следующие значения: clip С этим значением (по умолчанию)текст будет обрезан и его часть будет невидимой. Сейчас это происходит по умолчанию во всех браузерах. Имейте ввиду, чтобы правило работало - текст должен быть внутри элемента, который по той или иной причине не разрешает естественный разрыв строки. ellipsis При таком значении текст будет тоже обрезаться, но тот факт, что этот текст неполный, будет обозначаться многоточием ("...") Как показано ниже, многие браузеры поддерживают это свойство. Старые версии IE включали в себя его поддержку, но, судя по всему, реализация изменилась, поэтому новые IE используют префиксы. Более подробную информацию об этом, а так же живые примеры, можно увидеть здесь. Поддержка браузерами: IE6+, Firefox 7+, Chrome 1+, Safari 1.3+, Opera 11+ Hyphens И наконец-то, CSS3 представило новое свойство hyphens, которое используется для того, чтобы указать браузеру, вставлять автоматически дефис или нет. none Это значение "говорит" браузеру никогда не расставлять переносы, даже если определены точки разрыва. manual Это значение по умолчанию. Браузер не будет вставлять перенос, пока не увидит символ переноса. На самом деле вы можете сами задать дефис с помощью символа "мягких переносов" (soft hyphenation character), который внутри слова выглядит как hyphens. auto При этом значении браузер будет автоматически вставлять разрывы слов и переносы, в соответствии с языком, определенным для текущей страницы. Пример. Поддержка браузерами: IE10+, Firefox 6+ (обоим нужны вендорные префиксы) Заключение Хотя браузеры и не особо пока поддерживают эти новые фишки, приятно знать, что в будущем мы будем иметь в своем распоряжении несколько мощных инструментов для более тонкой обработки разрывов строк и переполнений. P.S.если честно я до сих пор не осознал в полной мере свойство hyphens. Поэтому могут быть ошибки в переводе.
