Overflow-clip-margin - Property CSS

Syntax diagram of overflow-clip-margin.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• length is a positive or zero numerical value, followed by one of CSS dimension units.

Description of the overflow-clip-margin property.

overflow-clip-margin sets the overflow margins. In other words, it defines how far the content can overflow the element. This assumes that the content is too large to be fully visible in the space allocated to it, and that the overflow property is set to the clip value.

See also the overflow property.

Values for overflow-clip-margin.

• overflow-clip-margin: 0px;

  LThe initial value of the property is 0. Overflowing content is hidden, but it can still extend into the bottom padding (this is the default behavior of browsers). In the example, the blue area represents the area that can contain content (content-box); this area excludes padding and the border.

  This text is too large for the element. It will be truncated but may still overflow onto the bottom inner margin.
  overflow-clip-margin:0px;
• overflow-clip-margin: 20px;

  A numeric value, positive or zero; followed by a CSS dimension units. Percentages are not accepted. This value indicates the overflow margin, measured relative to the padding-box.

  This text is too large for the element. It will be truncated but can still overflow the border-box area by 20 pixels.
  
  overflow-clip-margin:20px;
• overflow-clip-margin: content-box 10px; overflow-clip-margin: padding-box 10px; overflow-clip-margin: border-box 10px;

  Overflow margins are calculated relative to content-box, padding-box, or border-box. If no numeric value is specified, the overflow stops at the indicated surface.
  By default, padding-box is used as the reference. In other words, when overflow-clip-margin is left at its initial value, the content can encroach on the inner margins.

  Example below: we set a fairly large inner margin (20 pixels) for these two elements. The content-box area is represented by the sky blue color. The first element overflows to the right (line breaks not allowed) and the second overflows to the bottom. In both cases, we can see that the content encroaches on the border.

  This example does not work on Firefox  .

   This content overflows to the right due to a restriction on line breaks

  overflow-clip-margin:border-box;

  This content overflows at the bottom, even encroaching on the border.

  overflow-clip-margin:border-box;
• overflow-clip-margin: initial; (0) overflow-clip-margin: inherit; overflow-clip-margin: revert; overflow-clip-margin: revertLayer; overflow-clip-margin: unset;

  Links to the presentation of these different values: initial, inherit, revert, revert-layer, unset.

Animation of the overflow-clip-margin property.

JJust a small example of animating the overflow-clip-margin property: an image that gradually reveals itself. There would be other ways to achieve this result.

On -webkit- browsers (Chrome  , Opera  , Edge  ...), the animation jumps abruptly from one value to another, whereas on Firefox   the transition is smooth.

Manipulating the overflow-clip-margin property programmatically.

With Javascript, change the value of overflow-clip-margin.

In JavaScript, here are two code examples to modify the value of overflow-clip-margin. You can see that JavaScript offers a syntax with the typical CSS notation: a dash to separate words (kebab-case), and another syntax with a capital letter to separate words (camel-case).

let el = document.getElementById('id'); el.style['overflow-clip-margin'] = '1ex'; // or let el = document.getElementById('id'); el.style.overflowClipMargin = '1ex';

With Javascript, read the value of overflow-clip-margin.

The property must have been applied directly to the element itself via its style attribute: this code does not work for values set through a CSS selector. The value is returned as it was defined, in particular, with the same unit.

let el = document.getElementById('id'); let value = el.style['overflow-clip-margin']; // or let el = document.getElementById('id'); let value = el.style.overflowClipMargin;

With Javascript, read the calculated value of overflow-clip-margin.

The computed value is the one that has been applied to the element via its style attribute, or via a CSS selector, failing that, a potential inherited value, or otherwise the initial value of the property: 0 for overflow-clip-margin.

If a value has been set as a numeric value with any unit, it will be converted to pixels.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('overflow-clip-margin');

With JQuery, change the value of overflow-clip-margin.


$('#id').css('overflow-clip-margin', '1ex');
// or
$('#id').css('overflowClipMargin', '1ex');


With JQuery, read the calculated value of overflow-clip-margin.

let value = $('#id').css('overflow-clip-margin');

Other code examples.

The page Javascript and CSS provides other examples of JavaScript and JQuery code for manipulating styles.

Try it yourself.

The buttons below apply the entered value to the overflow-clip-margin property and then display either the value as it was applied or the calculated value. This second option allows you to see how the overflow-clip-margin values are stored (serialized). In particular, it can be observed that all dimension units are converted into pixels.

Simulator.

Effect of overflow-clip-margin on a text-containing element.

To clearly illustrate the effect of the overflow-clip-margin property, the element below has been given an inner padding of 20 pixels and a gray border, also 20 pixels. Of course, its overflow property has been set to clip.

Effect of overflow-clip-margin on an element containing an image.

The image has an opacity of 0.5, so that the block containing it can be glimpsed through it. Moreover, the block has rounded corners. On Firefox  , the rounding is applied to the image clipping, but not on -webkit- browsers.

Browsers compatibility with overflow-clip-margin.

The property overflow-clip-margin, although standardized, is not yet widely supported by all browsers (2025).

Notes:

(1) Only works when both axes use overflow: clip.

(2) Supports only a value for the overflow-clip-margin property, not a box.

1

overflow-clip-margin
property

Estimated overall support.

84%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

1

Opéra

1

Firefox pour Androïd

2

Samsung Internet

2

Chrome

2

Edge

2

Firefox

2

Androïd Brower

2

Chrome pour Androïd

2

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the overflow-clip-margin property.

• CSS Overflow Module Level 3

  First presentation of the overflow-clip-margin property.
  

  April 18, 2013

  Working Draft.

  

  

  

• CSS Overflow Module Level 4

  No notable change to the overflow-clip-margin property.
  

  June 13, 2017

  Working Draft.

  

  

  

Voir aussi, concernant la gestion des débordements.

The specification module CSS Overflow Module gathers all the definitions concerning content overflows. The property overflow-clip-margin, as well as the following ones, are described in this module.

Selectors:

⚠

::scroll-button()

Targets the scroll buttons. The value passed as a parameter more precisely indicates which button should be targeted.

⚠

::scroll-marker

Pseudo-element that individually target the scrolling markers.

⚠

::scroll-marker-group

Pseudo-element that targets the scroll marker container.

⚠

:target-current

Pseudo-class that targets the scroll marker for the displayed page.

Properties:

⚠

block-ellipsis

Manages the display of a suite marker at the end of an element when the content overflows the item.

⚠

line-clamp

Defines the number of lines that will be displayed in an element. The presence of excess text is indicated by a continuation character.

overflow

Overflow management, when the content is too large for the dimensions imposed on the element.

overflow-block

Management of excesses in the secondary direction.

overflow-inline

Management of overflows in the main direction.

overflow-x

Horizontal overflow management.

overflow-y

Vertical overflow management.

scroll-behavior

Chooses between a rough or gradual scrolling of the page.

⚠

scroll-marker-group

Activates and positions the scroll markers before or after the scroll container.

scrollbar-gutter

Whether or not to reserve the gutter for a scroll bar.

text-overflow

Sets the text overflow indicator.