Свойство overflow
Свойство overflow указывает браузеру, как поступать с содержимым (текст, картинки, другие блоки), которое вылазит за границы блока (за его ширину или высоту). Браузер может скрыть вылезающую часть, добавить полосы прокрутки или ничего не делать (оставить как есть — вылезшим за границы).
Синтаксис
Значения
| Значение | Описание |
|---|---|
| hidden | Скрывает то содержимое, которое вылезло за границы блока. |
| scroll | Добавляет полосы прокрутки, причем всегда, даже если ничего не вылазит (в этом случае они будут неактивными). |
| auto | Добавляет полосы прокрутки при необходимости: если содержимое не помещается — они появятся, если все помещается — их не будет. |
| visible | Не скрывает то содержимое, которое вылезло за границы блока. |
Значение по умолчанию: visible .
Пример . Значение visible
В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:
Пример . Значение visible
А сейчас ограничена не только ширина, но и высота (текст вылезет за блок и по высоте):
Пример . Значение hidden
Сейчас все, что вылезло за границы контейнера просто обрежется (и по высоте тоже). Обратите внимание на то, что обрезание по высоте происходит только тогда, когда она задана явно (в нашем случае height: 40px). В противном случае текст расширяет контейнер по высоте — и никакого обрезания не будет:
Пример . Значение scroll
При значении scroll полосы прокрутки будут всегда, даже если ничего не вылазит (в этом случае они будут неактивными). Сейчас текст не вылазит ни по ширине, ни по высоте, но полосы прокрутки все равно есть (неактивные):
Пример . Значение auto
При значении auto полосы прокрутки добавляются только, если содержимое вылазит за контейнер. Сейчас их нет, так как все помещается:
Как сделать, чтобы текст не выходил за див?
word-wrap: break-word; рaботает идеально, даже если 1000 букв подряд.
Если в тексте не будет пробелов то текст всегда будет выходить за рамки! Это факт! А если с пробелами напишешь то все будет гуд.
тогда текст который будет выходить за пределы div показываться не будет, а иначе «Текст без пробелов не переносится, это такое правило.»
text-overflow
Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto , scroll или hidden .
Синтаксис
text-overflow: clip | ellipsis
Значения
HTML5 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Многоточие в конце текста
Браузеры
Opera с версии 9.0 до версии 11.0 использует нестандартное свойство -o-text-overflow .