Как обрезать элемент на 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.
▼ hidden r a r s a r s f
position: relative;
position: relative;
overflow: hidden;
position: absolute; position: fixed;
Полоса прокрутки (scrollbar) и position: fixed;
Полоса прокрутки, принадлежащая тегу html, не перекрывается элементом с position: fixed. Это является проблемой для модального окна, распахнутом на весь экран. Решение просто как две копейки: нужно убрать прокрутку у html и добавить при необходимости прокрутку у body.
▼ прокрутка у body
См. красная стрелка в правом нижнем углу браузера.
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
CSS свойство clip
Только для элементов, которым задан position: absolute;. Единицы измерения можно выбрать px, em и т.п., но не проценты.
ооооооооочччччччччееееееееенннннннннььььььььь_длинное_первое_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_второе_слово ооооооооочччччччччееееееееенннннннннььььььььь_длинное_третье_слово
div < width: 50%; position: absolute; clip: rect(auto, auto, auto, auto); /* rect(вверх, вправо, вниз, влево); при auto сторона остаётся без изменений, но вылезающий текст обрезается */ >
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
Как обрезать блоки с помощью CSS?
Вот есть 3 блока, два с верху и один с низу, два верхних обрезают нижний, а линия между ними это border, при наводке на любой блок, фон увеличивается, я никак не могу придумать как обрезать.
Отслеживать
задан 21 мая 2016 в 20:13
95 1 1 золотой знак 1 1 серебряный знак 10 10 бронзовых знаков
опишите подробнее, что происходит по наводке, как именно увеличивается фон
21 мая 2016 в 20:41
фон(изображение) увеличивается по центру, я пробовал блоки transform:skew наклонять, но это не то, может какие то идее есть.
21 мая 2016 в 21:23
на вскидку приходит идея сделать на canvas блоки, и тогда если у блока будет overflow: hidden всё будет обрезаться как надо
21 мая 2016 в 21:29
Я тоже подумал об этом, пробовал еще skew’ом наклонять блоки, а внутренний блок повернуть обратно, только вот border не выходит. Думал еще clip-path использовать, но тут напрочь можно забыть про поддержку старых браузеров
21 мая 2016 в 21:33
codepen.io/anon/pen/mPNEex?editors=0100 это я не доделал ещё
22 мая 2016 в 16:28
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Предлагаю никак не обрезать.
html
для создания нижнего блока в виде ромба, достаточно повернуть прямоугольный или квадратный блок под 45%, при этом родительскому блоку выставить overflow: hidden .
.parent < overflow: hidden; >.child
Т.к. разворот под 45 градусов, предпалагет разворот и внутренного содержимого под 45, то внут. содержимое нужно развернуть под 45 градусов в обратном направлении.
.child < transform: rotate(45deg); >.child__inner
изображение
Изображения при этом никак особенно обрезать не надо, желательно что бы оно было достаточно большое, для компенсации зума.
недостатки
Приходится вручную подгонять координаты ромба и внут. содержимого.
Для html и css используются препроцессоры jade и stylus соотвественно. Если с ними не знакомы, там в каждом блоке есть кнопка View Compiled
Как обрезать блок css
Главная СтатьиОбрезка блоков с помощью CSS свойства clip-path
Поделиться в соцсетях:
Свойство clip-path предназначено для вырезания из элемента заданной части в форме фигуры. Область отсечения задается в качестве значения свойства. Таким образом все, что будет вне области отсечения — будет невидимо.
В качестве наглядного примера работы свойства рассмотрим два блока: первый обычный с картинкой на фоне, а второй — такой же, но с примененным свойством clip-path , которое выполняет его обрезку в форме звезды.
Как работает свойство clip-path
Свойство имеет следующий синтаксис:
.polygon < clip-path: ; >Значением свойства может быть либо функция, описывающая простую геометрическую фигуру, либо путь к SVG, описывающему более сложную форму. Параметрами функции являются координаты или конкретные величины в зависимости от типа функции. Начало системы координат, относительно которой вырисовывается обрезающая блок фигура, находится в левом верхнем углу, а направление осей будет вправо (ось X) и вниз (ось Y).
Давайте обрежем наш блок кругом. Для этого, например, укажем следующее свойство CSS:
.circle
Свойство считает это значение так — блок с классом .circle должен быть обрезан кругом с радиусом 80px , центр которого расположен на расстоянии 110px по оси X (т.е. с левого края) и 85px по оси Y (т.е. с верхнего края). Таким образом мы увидим следующую картину (серый фон добавлен для иллюстрации обрезанного места):
Обрезка простыми фигурами
Кроме рассмотренного выше примера круга, свойство clip-path позволяет обрезать блоки такими фигурами, как эллипс, прямоугольник и многоугольник. Значения, указанные в параметрах функций могут иметь любые единицы измерения.
circle
Синтаксис круга может быть как простым ( circle(50%) — просто указывает его радиус, центр круга будет в центре блока), так и составным ( circle(50% at 20% 20%) — указывается радиус и координата центра).
ellipse
Синтаксис эллипса схож с кругом, кроме одного — первый параметр должен состоять из двух величин: радиус по оси X и радиус по оси Y. Координаты центра указываются по желанию.
inset
Этой функцией можно определить прямоугольник с опцией закругления углов, который выражается величиной отступа границ от краев блока.
Например, значение inset(50px) обрежет блок прямоугольником, стороны которого сформированы отступами по 50px от каждой из граней; inset(20px 30px 40px 50px) обрежет блок прямоугольником, стороны которого сформированы отступами 20px 30px 40px и 50px сверху, справа, снизу и слева соответственно. Радиус указывается следующим параметром после ключевого слова round по правилам свойства border-radius .
polygon
Параметрами этой функции являются координаты, из которых формируется многоугольник. Точки фигуры, выраженные координатами по осям X и Y, записываются через запятую и могут быть как описаны вручную, так и взяты из готовых наборов различных ресурсов (напр. bennettfeely).
Обрезка сложной фигурой
Для определения пользовательской фигуры и применения ее в качестве обрезки блока, в HTML-коде необходимо указать SVG, clipPath которого будет той самой сложной фигурой.
Пример кода SVG:
В CSS достаточно будет обратиться к id необходимого clipPath :
.svg-shape
Если пофантазировать на тему разнообразия фигур для обрезки блоков, можно сгенерировать подобные примеры:
overflow
Обрезать ли то, что не поместилось в блок? Или показывать скролл?
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 8 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство overflow позволяет буквально определить, что делать с содержимым блочного (то есть для элемента, у которого display определяется как block , inline — block , flex или grid ) элемента, если оно не влезает в размеры — отобразить или обрезать (с полосами прокрутки или без).
Пример
Скопировать ссылку «Пример» Скопировано
Если содержимое блока будет больше, чем границы блока, оно будет «обрезано»:
.article /* Задаём ограничения по размеру блока */ width: 300px; height: 300px; overflow: hidden;>.article /* Задаём ограничения по размеру блока */ width: 300px; height: 300px; overflow: hidden; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
.selector overflow: hidden;>.selector overflow: hidden; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Синтаксис свойства позволяет задать два значения — для оси x и оси y. Если указано одно значение, оно равнозначно применяется для обеих осей. Аналогичного результата можно добиться, используя самостоятельные CSS-свойства overflow — x и overflow — y .
Значения
Скопировать ссылку «Значения» Скопировано
- visible — содержимое отображается снаружи родительского блока, если его размеры больше размеров «родительского» блока (значение по умолчанию);
- hidden — содержимое, выходящее за пределы «родительского» блока, обрезается по его границам без прокрутки;
- clip — новое значение, похожее по результату на hidden , но границы родительского блока рассчитываются с учётом внутренних отступов;
- scroll — контент обрезается по границам «родительского» блока, но внутри этой области содержимое доступно с помощью прокрутки;
- auto — если содержимое переполняет блок, контент будет доступен для прокрутки.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Чтобы контент внутри блока можно было скроллить, его содержимое должно явно превышать высоту родительского блока. Этого можно добиться или явно задав ему height , или ограничив высоту родительского блока.
�� Задавая родительскому блоку фиксированную высоту, учитывайте, что, если не указан box — sizing : border — box , то это значение не учитывает внутренние отступы, заданные с помощью padding , что может спровоцировать появление нежелательной прокрутки.
На практике
Скопировать ссылку «На практике» Скопировано
Realetive советует
Скопировать ссылку «Realetive советует» Скопировано
�� При вёрстке «классических» макетов необходимости в управлении полосой прокрутки практически нет. Чтобы избежать появления нежелательных полос прокрутки, минимизируйте явное задание высоты (кроме случаев, где это действительно необходимо).
Ещё один пример, когда будет полезно знание свойства overflow — обрезание текста с многоточием (в сочетании со свойством text — overflow : ellipsis или недокументированного -webkit — line — clamp ):