Бывают случаи, когда действительно длинная строка текста может переполнять контейнер макета.
Например:
Вот совок:
overflow-wrap: break-word;Убедитесь, что длинная нить завернется и не вырвется из контейнера. Вы также можете использовать их,word-wrapпотому что, как сказано в спецификации, они буквально являются альтернативными именами друг для друга. Некоторые браузеры поддерживают одно, а не другое. Firefox (проверено v43) поддерживает только файлыword-wrap. Blink (проверено Chrome v45) примет любой.- Когда слова
overflow-wrapиспользуются сами по себе, они будут ломаться везде, где им нужно. Если есть символ «допустимого разрыва» (например, буквальное тире), он там прервется, в противном случае он просто сделает то, что ему нужно. - Вы также можете использовать
hyphens, потому что тогда он попытается со вкусом добавить дефис там, где он ломается, если браузер поддерживает его (Blink не поддерживает на момент написания, Firefox делает). word-break: break-all;означает сообщить браузеру, что можно разбивать слово там, где это необходимо. Несмотря на то, что это так или иначе, я не уверен, в каких случаях это необходимо на 100%.
Если вы хотите, чтобы дефисы были более подробными, вы можете предложить их в своей разметке. Смотрите больше на странице MDN.
Поддержка браузера
Для word-break:
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 9,0-9,2 |
Для hypens:
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5.1 * |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 4,2-4,3 * |
Для overflow-wrap:
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Для text-overflow:
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Предотвращение переполнения с помощью многоточия
Другой подход, который следует рассмотреть, - это полное усечение текста и добавление эллипсов там, где строка текста попадает в контейнер:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Преимущество использования text-overflowзаключается в том, что он поддерживается повсеместно.
Примеры
См. Статью «Расстановка переносов пером на длинных словах» от CSS-Tricks (@ css-tricks) на CodePen.
См. Эллипсы пера от CSS-Tricks (@ css-tricks) на CodePen.
См. Статью Криса Койера (@chriscoyier) на CodePen.
Дополнительные ресурсы
- Майкл Шарнагл: Работа с длинными словами в CSS
- Кеннет Ошенберг: перенос слов / перенос слов с помощью CSS
- MDN: перенос слов, перенос слов, дефисы
- Спецификация: текст CSS уровня 3
Для SCSS-наклонных
Обычно это те вещи, которые вы добавляете в код там, где это необходимо, поэтому они создают хорошие @mixins:
@mixin word-wrap() ( overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; )@mixin ellipsis() ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )