overflow-clip-margin

Ограниченная доступность

Эта функция не является базовой, так как она не работает в некоторых из наиболее широко используемых браузеров.

Свойство overflow-clip-margin CSS определяет, насколько далеко за пределы своих границ элемент с overflow: clip может быть нарисован перед обрезкой. Граница, определенная этим свойством, называется краем обрезки переполнения рамки.

Синтаксис

/* <length> values */
overflow-clip-margin: 20px;
overflow-clip-margin: 1em;

/* <visual-box> | <length> */
overflow-clip-margin: content-box 5px;

/* Global values */
overflow-clip-margin: inherit;
overflow-clip-margin: initial;
overflow-clip-margin: revert;
overflow-clip-margin: revert-layer;
overflow-clip-margin: unset;

Значение <visual-box> , которое по умолчанию равно padding-box, указывает край рамки, который следует использовать в качестве начальной точки обрезки переполнения. Значение <length>, указанное в overflow-clip-margin, должно быть неотрицательным.

Примечание: Если у элемента нет overflow: clip , то это свойство будет проигнорировано.

Формальное определение

Начальное значение	`0px`
Применимо к	всем элементам
Наследуется	нет
Вычисленное значение	вычисленное значение <length> и ключевое слово <visual-box>
Тип анимации	дискретный

Формальный синтаксис

overflow-clip-margin = 
  <visual-box>    ||
  <length [0,∞]>  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box

Примеры

HTML

<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur.
</div>

CSS

.box {
  border: 3px solid black;
  width: 250px;
  height: 100px;
  overflow: clip;
  overflow-clip-margin: 20px;
}

Результат

Спецификации

Спецификация
CSS Модуль переполнения Уровень 3 # overflow-clip-margin

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`overflow-clip-margin`	90 Работает только когда обе оси используют `overflow: clip`. См. ошибку 40235584.	90 Работает только когда обе оси используют `overflow: clip`. См. ошибку 40235584.	102 Поддерживает только использование длины, а не визуальной рамки. См. ошибку 1661582.	76 Работает только когда обе оси используют `overflow: clip`. См. ошибку 40235584.	Нет	90 Работает только когда обе оси используют `overflow: clip`. См. ошибку 40235584.	102 Поддерживает только использование длины, а не визуальной рамки. См. ошибку 1661582.	64 Работает только когда обе оси используют `overflow: clip`. См. ошибку 40235584.	Нет	15.0 Работает только когда обе оси используют `overflow: clip`. См. ошибку 40235584.	90 Работает только когда обе оси используют `overflow: clip`. См. ошибку 40235584.
`border-box`	104	104	Нет	90	Нет	104	Нет	71	Нет	20.0	104
`content-box`	104	104	Нет	90	Нет	104	Нет	71	Нет	20.0	104
`padding-box`	104	104	Нет	90	Нет	104	Нет	71	Нет	20.0	104

См. также

Связанные свойства CSS: text-overflow, white-space, overflow, overflow-inline, overflow-x, overflow-y, clip, display

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-margin