· white-space: normal - Свойство white-space указывает браузеру, как обрабатывать пробелы в тексте.
· nowrap – Подряд идущие пробелы и переносы строк обрабатываются так же, как и с normal, но браузер перестает учитывать границы элемента и выводит весь текст в одну строку.
· pre-wrap(пробел не переносится) – Сохраняется все форматирование из HTML, включая переносы строк и последовательности пробелов. В отличие от pre текст переносится автоматически при достижении границы элемента.
· break-spaces – Поведение аналогично pre-wrap, за исключением одного отличия. Мы помним, что при значении pre-wrap слово переносятся, учитывая границы элемента, но если за крайним словом у границы следуют несколько пробелов, то они сохраняются в той же строке. В варианте с break-spaces эти пробелы поведут себя сложнее. Какая-то их часть останется на той же строке, дополняя ширину элемента до максимально допустимой, а вторая часть пробелов перенесется на новую строку.
· pre – Сохраняется все форматирование из HTML, включая переносы строк и последовательности пробелов. Границы элемента игнорируются. а текст может выходить за них.
· pre-line – Подряд идущие пробелы схлопываются, текст переносится в местах переноса строк в HTML. Текст переносится автоматически при достижении границ элемента.
Чтобы перенос был по буквам, используйте · word-break: break-all;
Также можно ограничить текст, обрезав вылезающий текст и визуально(через троеточие) пометить продолжение текста и при помощи свойства · text-overflow
· white-space: nowrap;
· text-overflow: ellipse;
comments ru.strackoverflow.com
· overflow-wrap: break-word
· word-wrap: break-word
· word-break: keep-all (у меня не работает), break-all
· line-break: loose(не работает), normal(не работает)
· hyphens: none, auto
Comment Autor:
· overflow-wrap: normal; ( Не поддерживает IE, FF; является копией word-wrap)
· word-wrap: normal;
· word-break: normal; (Не поддерживает Opera 12-14, значение keep-all не поддерживается IE, Chrome */
· line-break: auto; /* нет поддержки для русского языка */
· hyphens: manual; /* значение auto не поддерживается Chrome */
В чем состоит различие одно свойства от другого
По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.
Для того, чтобы игнорировать черточки, сразу видаемые глазу, вносим · word-break: keep-all;
Для того, чтобы браузер не обращал внимания и на мягкий дефис, вставляем · hyphens: none;
Если требуется перенос слов, то · word-wrap: break-word;
Советую применять всегда, поскольку он понимается всеми браузерами.
Он отличается от · word-break: break-all, которое является приоритетным, тем, что слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.
При совместном использовании · word-break: break-all, с · hyphens: auto, последнее игнорируется.
· hyphens: auto расставляет любые дефисы по своему усмотрению.
Но для того, чтобы оно работало, нужно обозначить свой язык, указав в div атрибут lang="ru".
· word-break - Свойство word-break определяет, как будем переноситься на новую строку текст при достижении края родительского контейнера.
· hyphens - Указываем, как браузеру следует переносить слова, если они не поместились в элемент.
· overflow-wrap - Говорим браузеру, как поступать со словами, которые не поместились в контейнер
· word-wrap - Как настроить переносы по символам в CSS
· text-overflow - Красиво обрезаем текст, не влезающий в блок. Можем даже добавить в конце многоточие…
· line-break - Свойство line-break определяет правила разрыва строки для китайского, японского и корейского текста, в особенности то, как перенос взаимодействует со знаками препинания и символами.