Як в css вирішити проблему довгих слів, css

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

Як в css вирішити проблему довгих слів, css

Кожен день в мережі я зустрічаю практично всі види дефектів відображення, пов'язаних з довгими словами - «зламані» макети, обрізку слів і ситуацію, яка приведена на зображенні вище.

Перше рішення для довгих слів - це застосування переносів.

Як в css вирішити проблему довгих слів, css

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

Крім цього, переноси в чому залежать від правил мови. Вам потрібно визначити атрибут lang в батьківському елементі. Також потрібно пам'ятати, що інші мови, крім англійської. підтримуються в браузерах на досить низькому рівні.

word-break

Так як не всі браузери повністю підтримують перенесення слів, давайте спробуємо це властивість CSS. яке вказує, чи слід розривати рядки всередині слів:

Як в css вирішити проблему довгих слів, css

Підтримка браузерами: Властивість CSS word-break підтримується у всіх браузерах. за винятком Opera Mini і старих браузерів Opera на основі Presto.

Overflow-wrap

Ще одне можливе рішення даної проблеми - використання word-wrap (overflow-wrap). Ще одна властивість, яке вказує, чи може браузер розбивати рядки всередині слів:

Як в css вирішити проблему довгих слів, css

Підтримка браузерами: Властивість CSS word-wrap підтримується у всіх браузерах. У деяких з них для нормальної роботи потрібно вказувати успадковане ім'я word-wrap (а не overflow-wrap).

Ще один варіант для вирішення проблеми довгих слів - це усічення:

Як в css вирішити проблему довгих слів, css

Підтримка браузерами: 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-браузерів, за цим посиланням - результати їх тестування.

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

Хоча це прекрасно працює в більшості випадків, я з'ясував, що в Firefox перенос не буде працювати (хоча він і підтримується) в поєднанні з word-break. Як і word-break. це властивість не підтримується, і не буде працювати в Opera Mini.

У той же час overflow-wrap прекрасно підтримується браузерами. Я протестував наступне рішення, використовуючи overflow-wrap і перенесення.

остаточне рішення

Переклад статті «Dealing with long words in CSS» був підготовлений дружною командою проекту Сайтобудування від А до Я.