Інтернет складається з контенту, контент складається зі слів, а слова можуть бути дуже і дуже довгими. І рано чи пізно вебмайстер стикається з проблемою перенесення довгих слів. Ця проблема особливо актуальна для адаптивного дизайну, і для невеликих блоків контенту. Отже, як же ж впоратися з цією проблемою?
Перше рішення для перенесення довгих слів – за допомогою дефіса.
Код CSS
.defisi { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
Підтримка браузерами: CSS-дефіси підтримуються майже всіма сучасними браузерами, за винятком Chrome, Opera, Android. Також, дуже часто дефіс вставляється в місцях, помилкових з граматичної точки зору.
Обрив слова – це властивість CSS, яке вказує на те, чи слід розривати рядки всередині слів.
Код CSS
.obriv-slova { -ms-word-break: break-all; word-break: break-all; word-break: break-word; }
Підтримка браузерами: Обрив слів підтримується у всіх браузерах, за винятком Opera Mini і старих версій Opera.
Наступне рішення – це використання Обгортки переповнення (overflow-wrap).
Код CSS
.obertka-perepolneniya { word-wrap: break-word; overflow-wrap: break-word; }
Підтримка браузерами: підтримується практично у всіх браузерах. Примітка: Деякі браузери вимагають використання “word-wrap” замість “overflow-wrap”.
Ще один варіант – використання трьох крапок.
Код CSS
.mnogotochiye { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
Підтримка браузерами: підтримується всіма сучасними браузерами.
Це працюючий метод, але далеко не ідеальний.
Фінальне рішення: Використання Обгортки переповнення та дефіса.
Код CSS
.finalnoye-resheniye { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
Це рішення дозволить браузеру, який підтримує його, вставляти дефіс, а для браузерів, що не підтримують його, вставляти розрив рядка.
Навіть якщо ви дуже талановиті і докладаєте великих зусиль, для деяких результатів просто потрібен час:…
Цей практичний урок допоможе вам перенести дані з вашого Excel-файлу (з деякими конкретними стовпцями) до…
Пиво – один із найпопулярніших напоїв, який поряд з чаєм та кавою відомий у всіх…
Досить часто у програмістів виникає спокуса написати якусь велику функцію, що повинна вирішувати певну задачу.…
Дискусії навколо цієї теми вас, певно, вже втомили. Але я в даній статті постараюсь показати…
Консоль браузера (також відома як консоль JavaScript або веб-консоль), — це потужний інструмент для розробників,…