css overflow, word-wrap, text-overflow

По умолчанию установлены четыре свойства

height: auto;
width: auto;
overflow: visible;
word-wrap: normal;

Благодаря им контейнер растягивается, если его содержимое больше него. Поэтому не приходится беспокоится о таких действиях, как расчёт размера блока.

Часто устанавливают ширину контейнера width. Если в заданные размеры содержимое блока не помещается, то оно отображается поверх него. Например, ооооооооооччччччччччеееееееееенннннннннньььььььььь_длинное_слово.

Для предотвращения переполнения применяется свойство overflow (overflow-x управляет горизонтальной прокруткой, overflow-y - вертикальной).

overflow: visible | hidden | scroll | auto
overflow-x: visible | hidden | scroll | auto
overflow-y: visible | hidden | scroll | auto

overflow: hidden; скрывает содержимое, которое выходит за пределы блока, скажем, наше ооооооооооччччччччччеееееееееенннннннннньььььььььь_длинное_слово

overflow: scroll; добавляет две полосы прокрутки, а вот и ооооооооооччччччччччеееееееееенннннннннньььььььььь_длинное_слово

overflow: auto; добавляет полосу прокрутки при необходимости: если содержимое шире контейнера, то горизонтальную, выше - вертикальную, посмотрим, ооооооооооччччччччччеееееееееенннннннннньььььььььь_длинное_слово

overflow: visible; вариант, заданный по умолчанию, когда содержимое отображается и за пределами установленной ширины и высоты, вот так - ооооооооооччччччччччеееееееееенннннннннньььььььььь_длинное_слово

Есть ещё свойство clip. Тут о нём уже было написано.

Для текста overflow: hidden; совсем не пригоден, поскольку делает его не читаемым. Вот здесь нужно воспользоваться свойством word-wrap, который может установить перенос слов.

word-wrap: break-word; перенос строк добавляется автоматически, ооооооооооччччччччччеееееееееенннннннннньььььььььь_длинное_слово

word-wrap: normal; строки переносятся там, где задан очевидный перенос, ооооооооооччччччччччеееееееееенннннннннньььььььььь_длинное_слово

Помимо этого есть свойство text-overflow, которое обрезает текст. Чтобы данное свойство функционировало, нужно совместное применение:

width: значение; 
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap;
word-wrap: normal;

text-overflow: clip; обрезает текст по размеру области

text-overflow: ellipsis; добавляет многоточие

text-overflow: '☟'; добавляет любой знак, который обозначим в кавычках

Образец использования

Я думаю, вы обратили внимание, что если навести на примеры для text-overflow, то поле раскрывается. Это реализовано благодаря коду:

<style type="text/css">
.skryt {
  background-color: rgb( 255, 153, 0); 
  width: 20%; 
  overflow: hidden; 
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
} 

.skryt:hover {
  overflow: visible; 
  white-space: normal;
}
</style>

<div class="skryt">содержимое</div>