Как обрезать элемент на CSS (свойства overflow, text-overflow и clip)

По умолчанию если в заданные размеры содержимое блока не помещается, то оно отображается поверх него.

Например, ооооооооооччччччччччеееееееееенннннннннньььььььььь_длинное_слово.

CSS свойство overflow

Для предотвращения переполнения у блочных элементов применяется свойство overflow (overflow-x управляет горизонтальной прокруткой, overflow-y - вертикальной). Оно бесполезно для таких HTML элементов как textarea и input.

▼ hidden scroll auto ► x y

содержимое выходит за границы установленной ширины и высоты элементасодержимое, которое выходит за пределы блока, скрытов обязательном порядке, вне зависимости от того, нужна она или нет, добавляется полоса прокруткитолько при необходимости появляется полоса прокрутки по горизонталипо вертикали

ооооооооочччччччччееееееееенннннннннььььььььь_длинное_первое_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_второе_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_третье_слово

div {
  overflow-x-y: visiblehiddenscrollauto;
  width: 50%;
}

overflow и position: absolute;

Элемент с position: absolute; перемещается в рамках другого элемента с position, отличного от static. То есть родитель с overflow: hidden; и position: static; не будет обрезать содержимое потомка с position: absolute; или position: fixed.

Полоса прокрутки (scrollbar) и position: fixed;

Полоса прокрутки, принадлежащая тегу html, не перекрывается элементом с position: fixed. Это является проблемой для модального окна, распахнутом на весь экран. Решение просто как две копейки: нужно убрать прокрутку у html и добавить при необходимости прокрутку у body.

▼ прокрутка у body
См. красная стрелка в правом нижнем углу браузера.

<html>
  <head>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      body {
        overflow: auto;
      }
      div {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        border: solid red; /* чтобы понять где проходит граница */ 
      }
    </style>
  </head>
  <body>
    <!-- длинное содержимое -->
    <div></div>
  </body>
<html>

CSS свойство text-overflow: закончить многоточием

При overflow не в значении visible текст становится не читаемым, обрезаясь на полуслове. Особенно, если его перенос на другую строку запрещён благодаря white-space в значении nowrap. В этом случае можно обозначить, что часть слов убрана и повествование не закончено, воспользовавшись свойством text-overflow.

▼ ellipsis "символ"

обрезать текст по размеру области с добавлением многоточияс добавлением любого знака в HEX кодировке

div {
  width: 50%;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal; /* для IE */ 
  text-overflow: clipellipsis"\2026\20\bb";
}

div:hover {
  overflow: visible; 
  white-space: normal;
}

CSS свойство clip

Только для элементов, которым задан position: absolute;. Единицы измерения можно выбрать px, em и т.п., но не проценты.

div {
  width: 50%;
  position: absolute;
  clip: rect(auto, auto, auto, auto); /* rect(вверх, вправо, вниз, влево); при auto сторона остаётся без изменений, но вылезающий текст обрезается */ 
}

Интересный пример от css-tricks.com

наверх ↑

6 комментариев:

ololo: Отлично! таких примеров нигде еще не встречал. не нужно в блокнот для каждого свойства лесть!
NMitra: Я к этому варианту пришла через тернистый путь проб и ошибок. Сама без "Шпаргалки" уже не могу - это мой блокнот. ))) Правда всё ещё она не в том состоянии, в котором я её вижу в конечном итоге.
Дмитрий Емцов: А подскажите пожалуйста, как сделать так, чтобы мое длинное название обрезалось только после второй строки? То есть не переносилось на третью строку, а обрезалось после конца второй.
NMitra: Пока это невозможно. Что-то подобное я видела в "черновиках", но на практике нет поддержки браузерами.
Евгений Гринец: А подскажите пожалуйста, как сделать так, чтобы мое длинное название обрезалось только после второй строки? То есть не переносилось на третью строку, а обрезалось после конца второй.

some_class:
| First line,
| second line
| and more

.soome_class {
font-size: 1em;
height: 2em;
overflow: hidden;
}
NMitra: Установите height, равную высоте двух строк. height двух строк = line-height * 2