Как в CSS решить проблему длинных слов

Веб-пространство построено на содержимом, а содержимое состоит из слов, и возможно из длинных. Всем «участникам» всемирной паутины рано или поздно приходится иметь дело с длинными словами:

Как в CSS решить проблему длинных слов Пример

Каждый день в сети я встречаю практически все виды дефектов выведения, связанных с длинными словами – «сломанные» макеты, обрезку слов и ситуацию, которая приведена на изображении выше.

Переносы

Первое решение для длинных слов — это применение переносов.

Как в CSS решить проблему длинных слов Пример

.hyphens { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}

Поддержка браузерами: CSS -переносы поддерживаются во всех популярных браузерах, за исключением браузеров, реализованных на основе движка Blink(Chrome, Opera, Android). Здесь описаны все распространенные ошибки в Chrome. Я также протестировал Safari 5.1 под Windows, в котором переносы поддерживаются, но для моих тестовых слов все они добавлялись не в тех местах, в которых необходимо.

Кроме этого, переносы во многом зависят от правил языка. Вам необходимо определить атрибут lang в родительском элементе. Также необходимо помнить, что иные языки, кроме английского, поддерживаются в браузерах на весьма низком уровне.

Вы также можете использовать библиотеку JavaScript, такую как Hyphenator.js, которая работает со многими языками и многими браузерами. Недостатком этого решения будет то, что вам необходимо будет загружать много дополнительных скриптов JavaScript, что может существенно снизить производительность.

word-break

Поскольку не все браузеры в полном объеме поддерживают перенос слов, давайте попробуем это свойство CSS, которое указывает, следует ли разрывать строки внутри слов:

Как в CSS решить проблему длинных слов Пример

.word-break { -ms-word-break: break-all; word-break: break-all; word-break: break-word;}

Поддержка браузерами: Свойство CSS word-break поддерживается во всех браузерах, за исключением Opera Mini и старых браузеров Opera на основе Presto.

Overflow-wrap

Ещё одно возможное решение данной проблемы — использование word-wrap(overflow-wrap). Ещё одно свойство, которое указывает, может ли браузер разбивать строки внутри слов:

Как в CSS решить проблему длинных слов Пример

.word-wrap { word-wrap: break-word; overflow-wrap: break-word;}

Поддержка браузерами: Свойство CSS word-wrap поддерживается во всех браузерах. В некоторых из них для нормальной работы требуется указывать унаследованное имя word-wrap(а не overflow-wrap).

Эллипсис

Ещё один вариант для решения проблемы длинных слов — это усечение:

Как в CSS решить проблему длинных слов Пример

.ellipsis { overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}

Поддержка браузерами: Text-overflow поддерживается во всех основных браузерах.

На первый взгляд кажется, что этот способ неплохо справляется с нашей проблемой, но он имеет в себя ряд недостатков. Прежде всего, он будет обрезать любой текст, занимающий более одной строки, даже если вы использовали короткие слова, и они прекрасно разместились бы в нескольких строках. Кроме этого слова могут обрезаться так, что исходное слово будет получать иное значение.

Пожалуйста, не используйте text-overflow: ellipsis, так как сокращать слова — это не работа CSS. Только, если вам действительно надо это сделать на стороне сервера, и только после полного сокращения слов.

Заключение

Я проверил все приведенные выше примеры и их сочетания в следующих браузерах: IE7, IE8, IE9, IE10, IE11, Edge, Firefox 39(Windows, Linux, Mac), Chrome 44(Windows, Linux, Mac), Opera 30(Windows, Mac), Safari 8(Mac), Safari 5.1(Windows), Android-5(Nexus 6), Android 4.4 (Nexus 5), Android 2.3 (Galaxy S2), IOS 8.3 (iPhone 6), IOS 7 (iPhone 5S), IOS 6 (iPhone5), Opera Mini ( Android 5 ), Opera Classic (Android 5), Opera Mobile (Android 5) и Windows Phone 8.1 (Lumia 930), используя реальные устройства и BrowserStack . По данной ссылке вы найдете список всех 26-браузеров, по данной ссылке — результаты их тестирования.

В интернете можно найти и такое решение :

.hyphenate { -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}

Хотя это прекрасно работает в большинстве случаев, я выяснил, что в Firefox перенос не будет работать (хотя он и поддерживается) в сочетании с word-break . Как и word-break , это свойство не поддерживается, и не будет работать в Opera Mini .

В то же время overflow-wrap прекрасно поддерживается браузерами. Я протестировал следующее решение, используя overflow-wrap и перенос.

Окончательное решение

.hyphenate { overflow-wrap: break-word word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}

Этот программный код отображает переносы во всех браузерах, в которых они поддерживаются, и разрывы строк во всех остальных. Хотя я и протестировал это решение в 26 разных браузерах, но до сих пор не уверен, что оно будет работать в 100% случаев — если вы найдете какое-нибудь исключение, пожалуйста, дайте знать об этом в комментариях к статье.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *