CSS Overflow Module Level 4

CSS Overflow Module Level 4
CSS Overflow Module Level 4
Editor’s Draft
6 April 2026
More details about this document
This version:
Latest published version:
Feedback:
CSSWG Issues Repository
Inline In Spec
Editors:
L. David Baron
Google
Florian Rivoal
On behalf of Bloomberg
Elika J. Etemad / fantasai
Apple
Suggest an Edit for this Spec:
GitHub Editor
Test Suite:
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
This module contains the features of CSS relating to scrollable overflow handling in visual media.
It builds on the
CSS Overflow Module Level 3
defining
line-clamp
, its longhands, and its legacy pre-standard syntax;
adding a
block-ellipsis
property;
and expanding
overflow-clip-margin
with longhands.
CSS
is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
Status of this document
This is a public copy of the editors’ draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “css-overflow” in the title, like this:
“[css-overflow]
…summary of comment…
”.
All issues and comments are
archived
Alternately, feedback can be sent to the (
archived
) public mailing list
www-style@w3.org
This document is governed by the
18 August 2025 W3C Process Document
The following features are at-risk, and may be dropped during the CR period:
continue: discard
“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first.
1.
Introduction
This specification extends
[CSS-OVERFLOW-3]
It contains several primary sections:
Overflow Scrolling and Clipping Controls
This section defines relatively simple extensions to the
overflow-*
properties
in Level 3
Automatic Ellipses
This section defines some experimental extensions to the
*-ellipsis
properties
in Level 3
Note:
At the time of writing,
[CSS-OVERFLOW-3]
is not completely finalized yet.
To avoid accidental divergences and maintenance overhead,
This specification is written as a delta specification over css-overflow Level 3.
Once the level 3 specification is final,
its content will be integrated into this specification,
which will then replace it.
Until then, this specification only contains additions and extensions to level 3.
1.1.
Value Definitions
This specification follows the
CSS property definition conventions
from
[CSS2]
using the
value definition syntax
from
[CSS-VALUES-3]
Value types not defined in this specification are defined in CSS Values & Units
[CSS-VALUES-3]
Combination with other CSS modules may expand the definitions of these value types.
In addition to the property-specific values listed in their definitions,
all properties defined in this specification
also accept the
CSS-wide keywords
as their property value.
For readability they have not been repeated explicitly.
1.2.
Module Interactions
This module extends features defined in
[CSS-OVERFLOW-3]
2.
Overflow Concepts and Terminology
Copy
Level 3 content
when final.
3.
Scrolling and Clipping Overflow
Copy
Level 3 content
when final.
3.1.
Managing Overflow: the
overflow-x
overflow-y
, and
overflow
properties
This level extends the
overflow-x
and
overflow-y
properties
(and
overflow
shorthand
to apply to
replaced elements
On
replaced elements
the
used values
of all computed values other than
visible
is
clip
Host languages should define
UA style sheet
rules
that apply a default value of
clip
to such elements
and set their
overflow-clip-margin
to
content-box
Note:
Application of
overflow
to
replaced elements
was added
to allow images to paint effects outside their effective layout box;
the recommended UA style sheet rules are to effect their original behavior as a default.
See discussion in
Issue 7059
and
Issue 7144
This is a change from
CSS2.1
and is at-risk.
Application of
overflow
to
replaced elements
is still being worked out.
[Issue #7144]
3.2.
Changing Clipping Bounds: the
overflow-clip-margin-*
properties
Name:
overflow-clip-margin-top
overflow-clip-margin-right
overflow-clip-margin-bottom
overflow-clip-margin-left
overflow-clip-margin-block-start
overflow-clip-margin-inline-start
overflow-clip-margin-block-end
overflow-clip-margin-inline-end
Value:

||

Initial:
0px
Applies to:
boxes to which
overflow
applies
Inherited:
no
Percentages:
see individual properties
Computed value:
the computed

and a

keyword
Animation type:
per computed value if the

values match; otherwise discrete
Canonical order:
per grammar
Logical property group:
overflow-clip-margin
Name:
overflow-clip-margin
overflow-clip-margin-inline
overflow-clip-margin-block
Value:

||

Initial:
0px
Applies to:
boxes to which
overflow
applies
Inherited:
no
Percentages:
see individual properties
Computed value:
see individual properties
Animation type:
see individual properties
Canonical order:
per grammar
These properties and their shorthands
define the
overflow clip edge
of the box,
i.e. precisely
how far
outside its bounds
the box’s content is allowed to paint
before being clipped
by effects (such as
overflow: clip
, above)
that are defined to clip to the box’s
overflow clip edge
The
shorthand
longhand
relationships are as for
margin
but note that the
shorthands
have a restricted syntax.
Values are defined as follows:

Specifies the box edge to use as the
overflow clip edge
origin,
i.e. when the specified offset is zero.
If omitted,
defaults to
padding-box
on non-
replaced
elements,
or
content-box
on
replaced
elements.
Application of
overflow-clip-margin
to
replaced elements
is still being worked out.
[Issue #7144]

The specified offset dictates
how much the
overflow clip edge
is expanded from
the specified box edge.
Negative values shrink the box, instead.
Defaults to zero if omitted.
The
overflow clip edge
is shaped in the corners
exactly the same way as an
outer box-shadow
with a spread radius of the same cumulative offset
from the box’s
border edge
See
CSS Backgrounds 3
§ 4.2 Corner Shaping
and
CSS Backgrounds 3
§ 6.1.1 Shadow Shape, Spread, and Knockout
noting in particular the formula for outsets beyond the
border edge
4.
Automatic Ellipses
4.1.
Inline Overflow Ellipsis: the
text-overflow
property
Name:
text-overflow
Value:
[ clip
ellipsis

fade

{1,2}
Initial:
clip
Applies to:
block containers
Inherited:
no
Percentages:
refer to the width of the line box
Computed value:
as specified, with lengths made absolute
Canonical order:
per grammar
Animation type:
by computed value type
Tests
line-clamp-auto-009.html
(live test)
(source)
line-clamp-auto-010.html
(live test)
(source)
webkit-line-clamp-036.html
(live test)
(source)
webkit-line-clamp-037.html
(live test)
(source)
line-clamp-with-text-overflow-string-003.html
(live test)
(source)
This section might need to be re-synced against
[CSS-OVERFLOW-3]
This property specifies rendering when inline content overflows
its line box edge
in the inline progression direction of its block container element ("the block")
that has
overflow
other than
visible
Even though this property is not inherited,
anonymous block container boxes generated to
establish the line box’s
inline formatting context
(see
block container
are ignored,
and the value of the property that applies is the one
on the non anonymous box.
This can be seen in the “nested paragraph” part of
text-overflow examples
even though the word “NESTED” is wrapped in an anonymous block container
whose
text-overflow
property has the initial value,
it is ellipsed.
Text can overflow for example when it is prevented from wrapping
(e.g. due to
white-space
nowrap
or a single word is too long to fit).
Values have the following meanings:
clip
Clip inline content that overflows its block container element.
Characters may be only partially rendered.
ellipsis
Render an ellipsis character (U+2026)
to represent clipped inline content.
Implementations may substitute a more language, script, or writing-mode appropriate
ellipsis character,
or three dots "..." if the ellipsis character is unavailable.

Render the given string to represent clipped inline content.
fade( [

] )
Clip inline content that overflows its line box.
Characters may be only partially rendered.
In addition, the UA must apply a fade out effect
near the edge of the line box,
reaching complete transparency at the edge.
Do we need to define the way
the fade out is calculated
so that the fading is identical across browsers?
It should probably be something like
mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0))
except applied to the relevant portion of the line only.
The argument determines the distance
over which the fade effect is applied.
The

is resolved against the width of the line box.
Values lower than 0 are clipped to 0.
Values greater than the width of the line box are clipped to the width of the line box.
If the line box is too short
to display the fade effect at the desired length,
should we drop the effect,
or shrink the distance it is applied over until it fits,
or clip the end of the fade?
How should we deal with
things overflowing out of the line box,
or overlapping onto it?
Should fade apply to the logical content of the line,
or to the physical area of the line box,
or the intersection of both?
fade
Same as
fade()
but the distance over which the fading effect is applied
is determined by the UA.
1em
is suggested as a reasonable value.
The term "character" is used in this property definition
for better readability and means "grapheme cluster"
[UAX29]
for implementation purposes.
If there is one value,
it applies only to the
end
line box edge.
If there are two values,
the first value applies to the
line-left
edge,
and the second value applies to the
line-right
edge.
The terms
end
line-left
and
line-right
are defined in
[CSS-WRITING-MODES-3]
Note:
the use of
line-left
and
line-right
rather than
start
and
end
when there are two values is intentional,
to facilitate the use of directional characters such as arrows.
For the ellipsis
and string values,
implementations must hide characters and
atomic inline-level elements
at the applicable edge(s) of the line as necessary to fit the ellipsis/string, and
place the ellipsis/string immediately adjacent
to the applicable edge(s) of the remaining inline content.
The first character or
atomic inline-level element
on a line
must be clipped rather than ellipsed.
Bidi ellipsis examples
These examples demonstrate which characters get hidden
to make room for the ellipsis in a bidi situation:
those visually at the edge of the line.
Sample CSS:
div
font-family
monospace
white-space
pre
overflow
hidden
width
ch
text-overflow
ellipsis
Sample HTML fragments, renderings, and your browser:
HTML
Reference rendering
Your Browser
div
שלום 123456
div
123456 ם…
שלום 123456
div
dir
rtl
שלום 123456
div
…456 שלום
שלום 123456
ellipsing details
Ellipsing only affects rendering and must not affect layout
nor dispatching of pointer events:
The UA should dispatch any pointer event on the ellipsis to the elided element,
as if
text-overflow
had been
none
The ellipsis is styled and baseline-aligned according to the block.
Ellipsing occurs after relative positioning and other graphical transformations.
If there is insufficient space for the ellipsis,
then clip the rendering of the ellipsis itself
(on the same side that neutral characters on the line
would have otherwise been clipped with the
text-overflow:clip
value).
For bidi purposes, the ellipsis and string values must be treated
as if they were wrapped in an anonymous inline
with
unicode-bidi: isolate
which inherits
direction
from the block.
Tests
text-overflow-string-006.html
(live test)
(source)
text-overflow-string-007.html
(live test)
(source)
user interaction with ellipsis
When the user is interacting with content
(e.g. editing, selecting, scrolling),
the user agent may treat
ellipsis
, string values,
fade
or
fade()
as
text-overflow:clip
Selecting the ellipsis should select the ellipsed text.
If all of the ellipsed text is selected,
UAs should show selection of the ellipsis.
Behavior of partially-selected ellipsed text is up to the UA.
text-overflow examples
These examples demonstrate setting the text-overflow of a block container element
that has text which overflows its dimensions:
sample CSS for a div:
div
font-family
Helvetica
sans-serif
line-height
1.1
width
3.1
em
border
solid
.1
em
black
padding
0.2
em
margin
em
sample HTML fragments, renderings, and your browser:
HTML
sample rendering
your browser
div
CSS IS AWESOME, YES
div
First, a box with text drawing outside of it.
CSS IS AWESOME, YES
div
style
text-overflow:clip;
overflow:hidden"
CSS IS AWESOME, YES
div
Second, a similar box with the text clipped outside the box.
CSS IS AWESOME, YES
div
style
text-overflow:ellipsis;
overflow:hidden"
CSS IS AWESOME, YES
div
Third, a similar box with an ellipsis representing the clipped text.
CSS IS AWESOME, YES
div
style
text-overflow:ellipsis;
overflow:hidden"
NESTED
PARAGRAPH
WON'T ELLIPSE.
div
Fourth, a box with a nested paragraph demonstrating anonymous block boxes equivalency and non-inheritance into a nested element.
NESTED
PARAGRAPH
WON’T ELLIPSE.
div
style
text-overflow:fade;
overflow:hidden"
CSS IS AWESOME, YES
div
a box with the text fading out on overflow.
CSS IS AWESOME, YES
Note:
the side of the line that the ellipsis is placed depends on the
direction
of the block.
E.g. an overflow hidden right-to-left
direction
rtl
block clips inline content on the
left
side,
thus would place a text-overflow ellipsis on the
left
to represent that clipped content.
insert RTL example diagram here to illustrate note.
ellipsis interaction with scrolling interfaces
This section applies to elements with text-overflow other than
text-overflow:clip
(non-clip text-overflow)
and overflow:scroll.
When an element with non-clip text-overflow has overflow of scroll
in the inline progression dimension of the text,
and the browser provides a mechanism for scrolling
(e.g. a scrollbar on the element,
or a touch interface to swipe-scroll, etc.),
there are additional implementation details that provide a better user experience:
When an element is scrolled (e.g. by the user, DOM manipulation),
more of the element’s content is shown.
The value of text-overflow should not affect
whether more of the element’s content is shown or not.
If a non-clip text-overflow is set,
then as more content is scrolled into view,
implementations should show whatever additional content fits,
only truncating content which would otherwise be clipped
(or is necessary to make room for the ellipsis/string),
until the element is scrolled far enough
to display the edge of the content
at which point that content should be displayed
rather than an ellipsis/string.
This example uses text-overflow on an element with overflow scroll
to demonstrate the above described behavior.
sample CSS:
div.crawlbar
text-overflow
ellipsis
height
em
line-height
em
overflow
scroll
white-space
nowrap
width
15
em
border
em
solid black
sample HTML fragment:
div
class
"crawlbar"
CSS is awesome, especially when you can scroll
to see extra text instead of just
having it overlap other text by default.
div
demonstration of sample CSS and HTML:
CSS is awesome, especially when you can scroll
to see extra text instead of just
having it overlap other text by default.
As some content is scrolled into view,
it is likely that other content may scroll out of view on the other side.
If that content’s block container element is the same
that’s doing the scrolling,
and the computed value of
text-overflow
has two values, with
the value applying to the start edge being a non-clip value,
then implementations must render an ellipsis/string in place of
the clipped content,
with the same details as described in the value definition above,
except that the ellipsis/string is drawn in the
start
(rather than
end
) of
the block’s direction (per the direction property).
While the content is being scrolled,
implementations may adjust their rendering of ellipses/strings
(e.g. align to the box edges rather than line edges).
Same as previous example except with
text-overflow: ellipsis ellipsis
, demonstrated:
CSS is awesome, especially when you can scroll
to see extra text instead of just
having it overlap other text by default.
If there is insufficient space for both start
and end ellipses/strings,
then only the end ellipsis/string should be rendered.
4.2.
Indicating Block-Axis Overflow: the
block-ellipsis
property
Name:
block-ellipsis
Value:
no-ellipsis
auto

Initial:
no-ellipsis
Applies to:
block containers
Inherited:
yes
Percentages:
N/A
Computed value:
specified value
Canonical order:
per grammar
Animation type:
discrete
Tests
block-ellipsis-invalid.html
(live test)
(source)
block-ellipsis-valid.html
(live test)
(source)
continue-001.html
(live test)
(source)
This property allows inserting content into the last line box
before a
clamp point
or a (forced
or
unforced)
region break
to indicate the continuity of truncated / interrupted content.
It only affects line boxes contained directly by the
block container
itself,
but as it inherits, will have an effect on descendants’ line boxes unless overridden.
Tests
block-ellipsis-011.html
(live test)
(source)
block-ellipsis-012.html
(live test)
(source)
block-ellipsis-022.html
(live test)
(source)
block-ellipsis-repaint-002.html
(live test)
(source)
line-clamp-auto-016.html
(live test)
(source)
line-clamp-auto-017.html
(live test)
(source)
Ignoring any intervening
absolutely positioned
elements
or element closing boundaries,
this property affects a line box
that immediately precedes a
region break
or a
clamp point
when both participate in the same
independent formatting context
Tests
line-clamp-auto-034.html
(live test)
(source)
line-clamp-auto-036.html
(live test)
(source)
line-clamp-auto-039.html
(live test)
(source)
line-clamp-auto-040.html
(live test)
(source)
Note:
See
continue: discard
for a way to generate boxes with such a
region break
div
style
"continue: collapse; block-ellipsis: auto; max-height: 4lh"
div
div
Line 1
br
Line 2
br
Line 3
br
Line 4
div
class
"abspos"
>div
div
div
class
"abspos"
>div
div
div
class
"abspos"
>div

Line 5
div
Here the clamp point is not immediately after a line box,
but the only thing between it and the last line box
are element closing boundaries and abspos,
and both are in the same independent formatting context,
so "Line 4" is ellipsized.
Meanwhile, in this example,
there is an in-flow element
between the line box and the clamp point,
so no ellipsis is shown:
div
style
"continue: collapse; block-ellipsis: auto; max-lines: 2"
Line 1
br
Line 2
div
>div

Line 3
div
In this example,
the last line box is contained
in an
independent formatting context
so no ellipsis will be shown:
div
style
"continue: collapse; max-height: 2lh; block-ellipsis: auto"
Line 1
div
style
"display: flow-root"
Line 2
div

Line 3
div
The inserted content is called the
block overflow ellipsis
Values have the following meanings:
no-ellipsis
The rendering is unaffected.
Tests
block-ellipsis-023.html
(live test)
(source)
auto
Render an ellipsis character (U+2026)—​or a more typographically-appropriate equivalent—​as the
block overflow ellipsis
at the end of the affected line box.
UAs should use the conventions of the
content language
writing system, and
writing mode
to determine the most appropriate ellipsis string.
Tests
line-clamp-with-text-overflow-string-001.html
(live test)
(source)
line-clamp-with-text-overflow-string-002.html
(live test)
(source)
line-clamp-with-text-overflow-string-003.html
(live test)
(source)

Render the specified string
as the
block overflow ellipsis
at the end of the affected line box.
The UA may truncate this string if it is absurdly long.
When set to the empty string,
the behavior is identical to the
no-ellipsis
value.
Tests
block-ellipsis-024.html
(live test)
(source)
When
block-ellipsis
is neither
no-ellipsis
nor the empty string,
the
block overflow ellipsis
string
is placed at the end of the line box
reducing the space
available to the other contents of the line.
Tests
block-ellipsis-023.html
(live test)
(source)
block-ellipsis-024.html
(live test)
(source)
block-ellipsis-repaint-001.html
(live test)
(source)
block-ellipsis-repaint-003.html
(live test)
(source)
block-ellipsis-repaint-004.html
(live test)
(source)
More specifically:
The
block overflow ellipsis
is wrapped in an anonymous inline
whose parent is the
block container
’s
root inline box
This inline is assigned
unicode-bidi: isolate
and
line-height: 0
Tests
block-ellipsis-002.html
(live test)
(source)
block-ellipsis-003.html
(live test)
(source)
block-ellipsis-004.html
(live test)
(source)
block-ellipsis-005.html
(live test)
(source)
block-ellipsis-006.html
(live test)
(source)
block-ellipsis-010.html
(live test)
(source)
The user agent makes room as necessary of the
block overflow ellipsis
by displacing content from the end of the line as if wrapping,
until the last
soft wrap opportunity
(see
[CSS-TEXT-3]
that would still allow the entire
block overflow ellipsis
to fit on the line,
applying
CSS Text 4
§ 4.3 The White Space Processing Rules
including
CSS Text 4
§ 4.3.2 Phase II: Trimming and Positioning
before insertion.
Tests
block-ellipsis-001.html
(live test)
(source)
block-ellipsis-028.html
(live test)
(source)
block-ellipsis-029.html
(live test)
(source)
block-ellipsis-030.html
(live test)
(source)
webkit-line-clamp-025.html
(live test)
(source)
For this purpose,
soft wrap opportunities
added by
overflow-wrap
are ignored,
as are those inhibited by
text-wrap-mode: nowrap
Tests
block-ellipsis-013.html
(live test)
(source)
block-ellipsis-014.html
(live test)
(source)
block-ellipsis-015.tentative.html
(live test)
(source)
block-ellipsis-016.html
(live test)
(source)
block-ellipsis-017.html
(live test)
(source)
block-ellipsis-027.html
(live test)
(source)
If this results in the entire contents of the line box being displaced,
the line box is considered to contain a
strut
, as defined in
CSS 2
§ 10.8.1 Leading and half-leading
Tests
block-ellipsis-016.html
(live test)
(source)
block-ellipsis-018.html
(live test)
(source)
block-ellipsis-025.html
(live test)
(source)
Displacing content to make room for the
block overflow ellipsis
can cause the
logical height
of line box where it is inserted to shrink.
This must not cause a reevaluation of the effects of the
continue
property
and must not change which line box is the last one before the truncated content.
Tests
line-clamp-auto-041.html
(live test)
(source)
The anonymous inline of
block overflow ellipsis
is placed
after any remaining content,
after
CSS Text 4
§ 4.3.2 Phase II: Trimming and Positioning
as a direct child of the
block container
’s
root inline box
Tests
block-ellipsis-004.html
(live test)
(source)
block-ellipsis-005.html
(live test)
(source)
block-ellipsis-006.html
(live test)
(source)
block-ellipsis-026.html
(live test)
(source)
webkit-line-clamp-014.html
(live test)
(source)
webkit-line-clamp-032.html
(live test)
(source)
webkit-line-clamp-035.html
(live test)
(source)
Text
alignment and justification
occurs after placement,
and measures the inserted
block overflow ellipsis
together with the rest of the line’s content.
Tests
webkit-line-clamp-051.html
(live test)
(source)
webkit-line-clamp-052.html
(live test)
(source)
webkit-line-clamp-053.html
(live test)
(source)
Note:
Setting the
block overflow ellipsis
’s
line-height
to
makes sure that inserting it cannot cause the line’s height to grow,
which could cause further relayouts and potentially cycles.
This is almost equivalent to inserting the
block overflow ellipsis
as a paint-time operation, except that it still participates in alignment and justification.
The downside is that unusually tall / deep glyphs in the
block overflow ellipsis
may overflow.
The
block overflow ellipsis
must not be included
in either the
::first-letter
nor the
::first-line
pseudo-elements.
Tests
block-ellipsis-007.html
(live test)
(source)
block-ellipsis-008.html
(live test)
(source)
block-ellipsis-009.html
(live test)
(source)
block-ellipsis-019.html
(live test)
(source)
block-ellipsis-020.html
(live test)
(source)
block-ellipsis-021.html
(live test)
(source)
If the
block overflow ellipsis
is placed before a
region break
and
there is a subsequent
fragmentation container
in the
fragmentation context
that would receive subsequent content,
then the content displaced by the
block overflow ellipsis
must be pushed to that
fragmentation container
If it is placed before a
clamp point
then the displaced content must be pushed to the remainder of the
inline formatting context
The UA must treat the
block overflow ellipsis
as an unbreakable string,
If any part of the
block overflow ellipsis
overflows,
it is treated as
scrollable overflow
and its rendering is affected by the
text-overflow
property.
The
block overflow ellipsis
does not capture events:
pointer events are dispatched to whatever is underneath it.
It also has no effect on the intrinsic size of the box:
its
min-content
and
max-content
sizes
are calculated exactly as if
block-ellipsis
were
no-ellipsis
Note:
Future specifications may extend this feature,
for example by providing an
::ellipsis
pseudo-element
to style the text,
or by allowing the selection of a child element of the block
to use as either an inline-level or block-level indicator
(in which case, it can capture events).
5.
Suppressing Excess Content
5.1.
Limiting Visible Lines: the
line-clamp
shorthand property
Name:
line-clamp
Value:
none

||
<'block-ellipsis'>
-webkit-legacy
Initial:
none
Applies to:
see individual properties
Inherited:
see individual properties
Percentages:
N/A
Computed value:
see individual properties
Animation type:
see individual properties
Canonical order:
per grammar
Tests
line-clamp-valid.html
(live test)
(source)
line-clamp-invalid.html
(live test)
(source)
The
line-clamp
property is a
shorthand
for the
max-lines
block-ellipsis
, and
continue
properties.
It allows limiting the contents of a block container
to the specified number of lines;
remaining content is fragmented away
and neither rendered nor measured.
Optionally, it also allows inserting content into the last line box
to indicate the continuity of truncated/interrupted content.
Tests
line-clamp-001.html
(live test)
(source)
webkit-line-clamp-034.html
(live test)
(source)
The values have the following meaning:
none
Sets
max-lines
to
none
continue
to
auto
and
block-ellipsis
to
no-ellipsis
Tests
line-clamp-020.html
(live test)
(source)
line-clamp-auto-038.html
(live test)
(source)
webkit-line-clamp-018.html
(live test)
(source)

block-ellipsis
Sets
continue
to
collapse
if either or both values are specified,
unless the
-webkit-legacy
keyword is also specified.
Sets
max-lines
to the specified

or to
none
if omitted,
and
block-ellipsis
to other component of the value if specified
or to
auto
if omitted.
Tests
line-clamp-auto-001-crash.html
(live test)
(source)
line-clamp-auto-002-crash.html
(live test)
(source)
line-clamp-auto-001.html
(live test)
(source)
-webkit-legacy
Sets
continue
to
-webkit-legacy
See the corresponding longhand properties for details
about how this mechanism operates.
In this example, the lead paragraph of each article
is listed in a shortened menu,
truncated to fit within 5 lines
that end with “… (continued on next page)”:
li
line-clamp
"… (continued on next page)"
strong
display
block
text-transform
uppercase
li
><
href
"cheese-is-milk"
strong
Cheese is Actually Made of Milk!
strong
Investigative reporters at the World Wide Web Press Corps
have discovered the secret of cheese.
Tracing through byzantine layers of bureaucracy and shadow corporations,
our crack team of journalists have traced the source of camembert.
>li
Sample rendering:
+---------------------------------------+
| CHEESE IS ACTUALLY MADE OF MILK! |
| Investigative reporters at the World |
| Wide Web Press Corps have discovered |
| the secret of cheese. Tracing through |
| byzantine… (continued on next page) |
+---------------------------------------+
5.1.1.
Legacy compatibility
For compatibility with legacy content,
UAs that support
line-clamp
must also support the
-webkit-line-clamp
property
and the additional
-webkit-legacy
value for the
continue
property.
Name:
-webkit-line-clamp
Value:
none

Initial:
none
Applies to:
see individual properties
Inherited:
see individual properties
Percentages:
N/A
Computed value:
see individual properties
Animation type:
see individual properties
Canonical order:
per grammar
Tests
webkit-line-clamp-041-crash.html
(live test)
(source)
webkit-line-clamp-042-crash.html
(live test)
(source)
webkit-line-clamp-bug-1926732-crash.html
(live test)
(source)
webkit-line-clamp-049.html
(live test)
(source)
webkit-line-clamp-valid.html
(live test)
(source)
webkit-line-clamp-invalid.html
(live test)
(source)
Name:
continue
New values:
-webkit-legacy
Like
line-clamp
-webkit-line-clamp
is a shorthand of
max-lines
block-ellipsis
, and
continue
except that:
Tests
line-clamp-019.html
(live test)
(source)
line-clamp-034.html
(live test)
(source)
webkit-line-clamp-005.html
(live test)
(source)
its syntax is
none

it unconditionally sets
block-ellipsis
to
auto
Tests
webkit-line-clamp-003.html
(live test)
(source)
webkit-line-clamp-004.html
(live test)
(source)
it sets
continue
to
-webkit-legacy
instead of
collapse
when an

is specified
(as if the
-webkit-legacy
keyword was set on
line-clamp
Tests
webkit-line-clamp-001.html
(live test)
(source)
webkit-line-clamp-002.html
(live test)
(source)
webkit-line-clamp-003.html
(live test)
(source)
webkit-line-clamp-004.html
(live test)
(source)
The
-webkit-legacy
value behaves identically to
collapse
except that it only takes effect
if the
specified value
of the
display
property
is
-webkit-box
or
-webkit-inline-box
and the value of the
-webkit-box-orient
property
is
vertical
Tests
webkit-line-clamp-001.html
(live test)
(source)
webkit-line-clamp-002.html
(live test)
(source)
webkit-line-clamp-007.html
(live test)
(source)
webkit-line-clamp-015.html
(live test)
(source)
webkit-line-clamp-016.html
(live test)
(source)
webkit-line-clamp-024.html
(live test)
(source)
webkit-line-clamp-026.html
(live test)
(source)
webkit-line-clamp-048.html
(live test)
(source)
Note:
Implementations of the legacy
-webkit-line-clamp
property
have not behaved identically to what is specified here.
The historical behavior is quirky and less robust,
as documented for example in
this blog post
The current design learns from the mistakes of that early experiment,
and is intended to be sufficiently compatible with existing content
that implementations can eventually be changed to follow to the specified behavior.
If further adjustments are found to be necessary,
they will be incorporated to this specification.
In the meanwhile, authors should be aware that there may be discrepancies.
5.2.
Forcing a Break After a Set Number of Lines: the
max-lines
property
Name:
max-lines
Value:
none

Initial:
none
Applies to:
block containers
which are also either
line-clamp containers
or
fragmentation containers
that capture
region breaks
Inherited:
no
Percentages:
N/A
Computed value:
the keyword
none
or an integer
Canonical order:
per grammar
Animation type:
by computed value type
Tests
max-lines-valid.html
(live test)
(source)
max-lines-invalid.html
(live test)
(source)
webkit-line-clamp-030.html
(live test)
(source)
If the value of
max-lines
is not
none
then, given a
computed value
of
If the box is a
line-clamp container
its
line-based clamp point
is set
to the first possible clamp point after
its
th
descendant
in-flow
line box
If fewer than
line boxes exist,
or if there are no possible clamp points
after the
th descendant
in-flow
line box
then that line-clamp container has no
line-based clamp point
Tests
block-ellipsis-022.html
(live test)
(source)
line-clamp-001.html
(live test)
(source)
line-clamp-002.html
(live test)
(source)
line-clamp-003.html
(live test)
(source)
line-clamp-005.html
(live test)
(source)
line-clamp-006.html
(live test)
(source)
line-clamp-030.html
(live test)
(source)
line-clamp-with-abspos-018.html
(live test)
(source)
webkit-line-clamp-003.html
(live test)
(source)
webkit-line-clamp-004.html
(live test)
(source)
webkit-line-clamp-005.html
(live test)
(source)
webkit-line-clamp-006.html
(live test)
(source)
webkit-line-clamp-009.html
(live test)
(source)
webkit-line-clamp-010.html
(live test)
(source)
webkit-line-clamp-017.html
(live test)
(source)
webkit-line-clamp-019.html
(live test)
(source)
webkit-line-clamp-020.html
(live test)
(source)
webkit-line-clamp-021.html
(live test)
(source)
webkit-line-clamp-022.html
(live test)
(source)
webkit-line-clamp-023.html
(live test)
(source)
webkit-line-clamp-030.html
(live test)
(source)
webkit-line-clamp-031.html
(live test)
(source)
webkit-line-clamp-033.html
(live test)
(source)
webkit-line-clamp-038.html
(live test)
(source)
webkit-line-clamp-039.html
(live test)
(source)
webkit-line-clamp-040.html
(live test)
(source)
webkit-line-clamp-043.html
(live test)
(source)
webkit-line-clamp-block-in-inline-001.html
(live test)
(source)
webkit-line-clamp-dynamic-001.html
(live test)
(source)
webkit-line-clamp-with-line-height.html
(live test)
(source)
webkit-line-clamp-with-max-height.html
(live test)
(source)
line-clamp-content-height-with-dynamic-change.html
(live test)
(source)
If the box is a
fragmentation container
that captures
region breaks
region break
is forced after its
th
descendant
in-flow
line box
If fewer than
line boxes exist,
then
max-lines
introduces no
region break
Only line boxes in the same
block formatting context
are counted:
the contents of descendants that establish
independent formatting contexts
are skipped over while counting line boxes.
Tests
line-clamp-006.html
(live test)
(source)
webkit-line-clamp-011.html
(live test)
(source)
webkit-line-clamp-012.html
(live test)
(source)
webkit-line-clamp-013.html
(live test)
(source)
webkit-line-clamp-027.html
(live test)
(source)
webkit-line-clamp-029.html
(live test)
(source)
Note:
This implies that
max-lines
has no effect when applied to
multi-column containers
since any line box they contain are nested into
independent formatting contexts
Tests
discard-multicol-004.html
(live test)
(source)
Only positive integers are accepted.
Zero or negative integers are invalid
and must cause the declaration to be
ignored
Note:
The
widows
orphans
, and
break-inside
properties
do not affect the position of the forced
region break
introduced by the
max-lines
property.
Note: Despite the “region break” name, this is not a dependency on
[CSS-REGIONS-1]
The word “region” is only used as a classifier for forced breaks:
they can be “page breaks” (breaks across pages
[css-page-3]
),
“column breaks” (breaks across multi-column layout columns
[css-multicol-1]
),
or “region breaks” (breaks across any other kind of CSS-induced
fragmentation containers
).
If an implementation supports neither
[CSS-REGIONS-1]
nor
continue: discard
then it will have had no occasion yet to run into that kind of breaks,
and this will be an addition.
However the addition does not involve bringing over any of the
[CSS-REGIONS-1]
functionality.
All that is needed is:
be able to fragment
classify these fragmentation containers as “Category 3”
(i.e. not pages nor columns)
for the purpose of forced breaks.
5.3.
Handling of Excess Content: the
continue
property
Name:
continue
Value:
auto
discard
collapse
Initial:
auto
Applies to:
block containers
and
multicol containers
Inherited:
no
Percentages:
N/A
Computed value:
specified keyword
Canonical order:
per grammar
Animation type:
discrete
Tests
continue-valid.html
(live test)
(source)
continue-invalid.html
(live test)
(source)
line-clamp-014.html
(live test)
(source)
line-clamp-015.html
(live test)
(source)
line-clamp-029.html
(live test)
(source)
The
continue
property gives authors the ability
to truncate/interrupt the content inside a box,
either by visually hiding the remaining content,
or by turning the box into a
fragmentation container
(see
[CSS-BREAK-3]
and discarding the content after the
fragmentation break
auto
If the box has more content than can fit,
the excess content is handled according to the usual rules.
collapse
If the box is a
block container
, then it must
establish an independent formatting context
that also becomes a
line-clamp container
This causes all content after the
clamp point
to be visually hidden, and to not be
taken into account for the box’s
automatic block size
Tests
line-clamp-004.html
(live test)
(source)
line-clamp-008.html
(live test)
(source)
line-clamp-009.html
(live test)
(source)
line-clamp-013.tentative.html
(live test)
(source)
line-clamp-031.html
(live test)
(source)
webkit-line-clamp-006.html
(live test)
(source)
webkit-line-clamp-040.html
(live test)
(source)
continue-001.html
(live test)
(source)
If the box is a
multicol container
the behavior is the same as
auto
discard
The box must
establish an independent formatting context
and becomes a
fragmentation container
that captures
region breaks
if it is not already.
[CSS-BREAK-3]
Content after the first
region break
is not rendered.
Note:
This
region break
might be
forced
(e.g. imposed by
max-lines
or by another mechanism,
such as the
break-before
break-after
properties)
or
unforced
(e.g. if the content would otherwise overflow this
fragmentation container
due to its size constraints).
Breaks applying to other
fragmentation contexts
(such as pagination of this box itself)
do not cause any content to be discarded.
See
§ 5.3.2 Discarding Content
for further details.
continue: discard
is meant to generalize and replace the
region-fragment
property from
[CSS-REGIONS-1]
Once it is sufficiently stable in this specification,
region-fragment
should be removed from the regions specification in favor of this.
Note:
continue: discard
is
at risk
it may be removed before advancement to
Recommendation
if criteria for advancement are not fulfilled.
Given,
as in the illustration bellow,
an article with one excessively long overflowing line
and four more lines in the
block dimension
than can fit,
different renderings are possible based on the combination of the
overflow
and
continue
property.
continue: collapse
continue: discard
continue: auto
overflow: visible
overflow: hidden
When
text-wrap-style
is set to
balance
on a block container whose
continue
has a value other than
auto
or which participates in the
block formatting context
established by an element whose
continue
has a value other than
auto
layout must first be computed as if
text-wrap-style
were set to 'text-wrap-style/stable'.
Then, after any excess content has been truncated
and after any necessary
block overflow ellipsis
has been inserted,
the remaining content must be rebalanced,
as per
text-wrap-style: balance
If this rebalancing would cause the
logical height
of the content to grow,
the cutoff point (
clamp point
or
fragmentation break
) must be reevaluated,
and any necessary
block overflow ellipsis
reapplied accordingly.
Whether to rebalance again after that is up to the user agent,
but if it does so,
it must always ensure that the constraints
about the placement of the cutoff point are adhered to,
no matter how many iterations it choose to make.
Tests
line-clamp-balance-001.html
(live test)
(source)
line-clamp-balance-002.html
(live test)
(source)
line-clamp-balance-003.html
(live test)
(source)
line-clamp-balance-004.html
(live test)
(source)
line-clamp-balance-005.html
(live test)
(source)
line-clamp-balance-006.html
(live test)
(source)
line-clamp-balance-007.html
(live test)
(source)
line-clamp-balance-008.html
(live test)
(source)
line-clamp-balance-009.html
(live test)
(source)
line-clamp-balance-010.html
(live test)
(source)
line-clamp-balance-011.html
(live test)
(source)
line-clamp-balance-012.html
(live test)
(source)
For other values of
text-wrap-style
whether to apply them before the effects of the
continue
property,
after, or both,
is undefined in this level.
Additionally,
for compatibility (see
§ 5.1.1 Legacy compatibility
),
when the
computed value
of the
continue
property is
collapse
-webkit-legacy
, or
discard
and the
computed value
of the
-webkit-box-orient
property is
vertical
If the
specified value
of the
display
property is
-webkit-box
the
computed value
becomes
flow-root
and
the box establishes a
BFC
Tests
line-clamp-016.html
(live test)
(source)
line-clamp-017.html
(live test)
(source)
line-clamp-018.html
(live test)
(source)
webkit-line-clamp-007.html
(live test)
(source)
webkit-line-clamp-008.html
(live test)
(source)
webkit-line-clamp-045.html
(live test)
(source)
webkit-line-clamp-046.html
(live test)
(source)
If the
specified value
of the
display
property is
-webkit-inline-box
the
computed value
becomes
inline-block
and
the box establishes a
BFC
Tests
webkit-line-clamp-024.html
(live test)
(source)
Tests
webkit-box-computed.html
(live test)
(source)
Note:
This means that
line-clamp
(set without
-webkit-legacy
) will work
if both or neither of
-webkit-box-orient: vertical
and
display: -webkit-box
or
display: -webkit-inline-box
are set,
but not if
display: -webkit-box
or
display: -webkit-inline-box
is set
while
-webkit-box-orient: vertical
isn’t,
as the box would be a
flex container
rather than a
block container
and thus the
continue
property would not apply.
Tests
line-clamp-029.html
(live test)
(source)
5.3.1.
Line-clamp containers
line-clamp container
is an
independent
block formatting context
that additionally follows the rules in this section.
Line-clamp containers can have a
clamp point
which is one of the following block-axis positions inside it:
The start of the
line-clamp container
Tests
line-clamp-auto-011.html
(live test)
(source)
line-clamp-auto-037.html
(live test)
(source)
A point between two consecutive
line boxes
in an
inline formatting context
contained by the line-clamp container’s
block formatting context
Tests
line-clamp-auto-004.html
(live test)
(source)
line-clamp-auto-005.html
(live test)
(source)
line-clamp-auto-013.html
(live test)
(source)
line-clamp-auto-014.html
(live test)
(source)
line-clamp-auto-016.html
(live test)
(source)
line-clamp-auto-017.html
(live test)
(source)
line-clamp-auto-with-ruby-001.html
(live test)
(source)
line-clamp-auto-with-ruby-002.html
(live test)
(source)
line-clamp-auto-with-ruby-003.html
(live test)
(source)
line-clamp-auto-with-ruby-004.html
(live test)
(source)
webkit-line-clamp-031.html
(live test)
(source)
webkit-line-clamp-040.html
(live test)
(source)
For this definition,
out-of-flow
boxes between two line boxes
don’t prevent them from being consecutive.
This is the case even if
the second line box is pushed down by
floats
Such out-of-flow boxes are considered
to be after the clamp point.
A point between two
in-flow
block-level
sibling boxes
in the line-clamp container’s
block formatting context
Any
out-of-flow
boxes in between are considered
to be after the clamp point.
Tests
line-clamp-auto-034.html
(live test)
(source)
line-clamp-auto-035.html
(live test)
(source)
line-clamp-auto-036.html
(live test)
(source)
Tests
block-ellipsis-011.html
(live test)
(source)
block-ellipsis-012.html
(live test)
(source)
line-clamp-003.html
(live test)
(source)
line-clamp-auto-006.html
(live test)
(source)
line-clamp-auto-007.html
(live test)
(source)
line-clamp-auto-008.html
(live test)
(source)
line-clamp-auto-012.html
(live test)
(source)
line-clamp-auto-033.html
(live test)
(source)
webkit-line-clamp-004.html
(live test)
(source)
The
auto clamp point
will be set to the last possible clamp point
such that, for it and all previous possible clamp points,
the line-clamp container’s
automatic block size
(as determined below)
is not greater than the
block size
the box would have
if its automatic block size were infinite.
If the
block size
would be infinite,
then there is no
auto clamp point
If the
line-clamp container
’s
block formatting context root
has a
computed value
of
max-lines
set to
none
then the actual
clamp point
is the
auto clamp point
, if any.
Otherwise, the actual clamp point is the
line-based clamp point
, if any.
Tests
line-clamp-011.html
(live test)
(source)
line-clamp-035.html
(live test)
(source)
line-clamp-auto-001.html
(live test)
(source)
line-clamp-auto-004.html
(live test)
(source)
line-clamp-auto-005.html
(live test)
(source)
line-clamp-auto-006.html
(live test)
(source)
line-clamp-auto-007.html
(live test)
(source)
line-clamp-auto-008.html
(live test)
(source)
line-clamp-auto-011.html
(live test)
(source)
line-clamp-auto-012.html
(live test)
(source)
line-clamp-auto-013.html
(live test)
(source)
line-clamp-auto-014.html
(live test)
(source)
line-clamp-auto-016.html
(live test)
(source)
line-clamp-auto-033.html
(live test)
(source)
line-clamp-auto-035.html
(live test)
(source)
line-clamp-auto-036.html
(live test)
(source)
line-clamp-auto-037.html
(live test)
(source)
line-clamp-auto-039.html
(live test)
(source)
line-clamp-auto-040.html
(live test)
(source)
line-clamp-auto-with-ruby-002.html
(live test)
(source)
line-clamp-auto-with-ruby-003.html
(live test)
(source)
line-clamp-auto-with-ruby-004.html
(live test)
(source)
webkit-line-clamp-006.html
(live test)
(source)
webkit-line-clamp-031.html
(live test)
(source)
webkit-line-clamp-040.html
(live test)
(source)
webkit-line-clamp-with-line-height.html
(live test)
(source)
webkit-line-clamp-with-max-height.html
(live test)
(source)
Having the actual
clamp point
be the earlier of
the
line-based clamp point
and the
auto clamp point
, if both exist,
is a wanted behavior, but the syntax for it is still being worked out.
[Issue #12041]
Within a
line-clamp container
the following boxes and line boxes become
invisible boxes
Any
in-flow
or floating boxes
that follow the
clamp point
in the box tree.
This includes
independent formatting contexts
and all of their descendants.
Tests
line-clamp-008.html
(live test)
(source)
line-clamp-026.html
(live test)
(source)
line-clamp-027.html
(live test)
(source)
line-clamp-028.html
(live test)
(source)
line-clamp-031.html
(live test)
(source)
line-clamp-032.html
(live test)
(source)
line-clamp-033.html
(live test)
(source)
line-clamp-auto-033.html
(live test)
(source)
line-clamp-auto-with-ruby-002.html
(live test)
(source)
Any
line boxes
that follow the
clamp point
inside an
inline formatting context
Tests
line-clamp-010.html
(live test)
(source)
line-clamp-026.html
(live test)
(source)
line-clamp-027.html
(live test)
(source)
line-clamp-028.html
(live test)
(source)
webkit-line-clamp-040.html
(live test)
(source)
Any
absolutely positioned box
which has an invisible box within its
containing block chain
and all of its descendants.
Tests
line-clamp-with-abspos-001.html
(live test)
(source)
line-clamp-with-fixed-pos-001.html
(live test)
(source)
line-clamp-with-abspos-002.html
(live test)
(source)
line-clamp-with-fixed-pos-002.html
(live test)
(source)
line-clamp-with-abspos-003.html
(live test)
(source)
line-clamp-with-fixed-pos-003.html
(live test)
(source)
line-clamp-with-abspos-004.html
(live test)
(source)
line-clamp-with-fixed-pos-004.html
(live test)
(source)
line-clamp-with-abspos-005.html
(live test)
(source)
line-clamp-with-fixed-pos-005.html
(live test)
(source)
line-clamp-with-abspos-006.html
(live test)
(source)
line-clamp-with-fixed-pos-006.html
(live test)
(source)
line-clamp-with-abspos-007.html
(live test)
(source)
line-clamp-with-fixed-pos-007.html
(live test)
(source)
line-clamp-with-abspos-008.html
(live test)
(source)
line-clamp-with-fixed-pos-008.html
(live test)
(source)
line-clamp-with-abspos-009.html
(live test)
(source)
line-clamp-with-fixed-pos-009.html
(live test)
(source)
line-clamp-with-abspos-010.html
(live test)
(source)
line-clamp-with-fixed-pos-010.html
(live test)
(source)
line-clamp-with-abspos-011.html
(live test)
(source)
line-clamp-with-fixed-pos-011.html
(live test)
(source)
line-clamp-with-abspos-012.html
(live test)
(source)
line-clamp-with-fixed-pos-012.html
(live test)
(source)
line-clamp-with-abspos-013.html
(live test)
(source)
line-clamp-with-fixed-pos-013.html
(live test)
(source)
line-clamp-with-abspos-014.html
(live test)
(source)
line-clamp-with-fixed-pos-014.html
(live test)
(source)
line-clamp-with-abspos-015.html
(live test)
(source)
line-clamp-with-fixed-pos-015.html
(live test)
(source)
line-clamp-with-abspos-016.html
(live test)
(source)
line-clamp-with-fixed-pos-016.html
(live test)
(source)
line-clamp-with-abspos-017.html
(live test)
(source)
line-clamp-with-fixed-pos-017.html
(live test)
(source)
line-clamp-with-abspos-020.html
(live test)
(source)
line-clamp-with-abspos-021.html
(live test)
(source)
line-clamp-with-abspos-022.html
(live test)
(source)
line-clamp-with-abspos-023.html
(live test)
(source)
webkit-line-clamp-abspos-001.html
(live test)
(source)
Any overflow such invisible boxes and line boxes might have
is always counted as
ink overflow
rather than
scrollable overflow
Tests
line-clamp-021.html
(live test)
(source)
line-clamp-with-abspos-019.html
(live test)
(source)
NOTE:
This differs from the
display: none
-like behavior
of not rendered content with
continue: discard
Within a
line-clamp container
floats which have not been made into
invisible boxes
must be visually clipped to the
content edge
of the
line-clamp container
They do not introduce any clearance
that would make the
line-clamp container
increase its height,
and do not contribute to the
scrollable overflow area
If a
block container
contains a
clamp point
within itself or in any of its descendants,
its
automatic block size
will not take into account any invisible boxes,
nor any clipped float.
This also applies for the
line-clamp container
itself.
Tests
line-clamp-004.html
(live test)
(source)
line-clamp-009.html
(live test)
(source)
line-clamp-auto-004.html
(live test)
(source)
line-clamp-auto-005.html
(live test)
(source)
5.3.2.
Discarding Content
Note:
continue: discard
, and thus this subsection, is
at risk
it may be removed before advancement to
Recommendation
if criteria for advancement are not fulfilled.
Content that is “not rendered” due to
continue: discard
is discarded, similar to
display: none
It is not rendered.
It is also not made available for speech rendering.
It does not allow user interaction.
Make sure effects on OM are well defined
[Issue #2970]
What about
positioned
elements whose static position is in the discarded content are not rendered?
See also discussions in the
Sydney F2F meeting
[Issue #2971]
However, since intrinsic sizes are calculated across
fragmentation containers
this content
is
taken into account
for the purpose of finding the box’s
min-content
and
max-content
inline sizes
(see
CSS Fragmentation 3
§ 5.1 Breaking into Varying-size Fragmentainers
).
Min-content
and
max-content
block sizes
are calculated based on the content
from the start of the
fragmented flow
to the first
forced break
if any,
or to the end of the
fragmented flow
if there is no forced break.
Note:
This differs from the
visibility: hidden
-like behavior
of content after the
clamp point
with
continue: collapse
Note:
In the case of
parallel fragmentation flows
content occurring after the
fragmentation break
in the box tree
could still be rendered,
if it is laid out above the position
representing the end of this
fragmentation container
Additionally,
if the box is a
multi-column container
any
overflow columns
are also not rendered,
nor is any subsequent content—​including any
out of flow
content
whose static position is in or after overflow columns,
nor is any additional
multi-column line
or
multi-column row
that would be generated to hold such content.
Tests
discard-multicol-001.html
(live test)
(source)
discard-multicol-002.html
(live test)
(source)
discard-multicol-003.html
(live test)
(source)
discard-multicol-004.html
(live test)
(source)
In the absence of the
continue
property,
based on
CSS Multi-column Layout Module Level 1
the following markup and associated CSS would be expected
to render as follows.
div
class
"multicol"
Column 1
Column 2
Column 3
Overflow column
div
class
"spanner"
Spanner 1
div
div
class
"spanner"
Spanner 2
div
Following 1
Following 2
Following 3
div
class
"spanner"
Spanner 3
div
Following 4
Following 5
Following 6
div
.multicol
columns
border
solid
px
.multicol p
break-after
column
break-inside
avoid
.spanner
column-span
all
text-align
center
Column 1 Column 2 Column 3 Overflow column
Spanner 1
Spanner 2
Following 1 Following 2 Following 3
Spanner 3
Following 4 Following 5 Following 6
There is one overflow column,
a spanner whose static position is within that overflow column,
another spanner whose static position is after the overflow column,
inflow content after the spanners and the overflow column,
and another spanner whose static position is in this subsequent inflow content.
If we additionally apply the following style,
everything starting from and including the overflow column is discarded.
.multicol
continue
discard
block-ellipsis
auto
Column 1 Column 2 Column 3…
Appendix A: Possible extensions for
scrollbar-gutter
This section is non-normative.
This section documents current attempts
at extending the
scrollbar-gutter
property
to solve additional use cases.
However, it does not currently have consensus.
It is presented here to encourage discussion,
but non-experimental implementation is not recommended.
This example exercises all the additional values of the
scrollbar-gutter
property:
scrollbar-gutter: always
on the scroll container
scrollbar-gutter: match-parent
on each row inside the scroll container
With classic scrollbars
With overlay scrollbars
Name:
scrollbar-gutter
New values:
auto
[ [ stable
always ]
&&
both-edges
||
match-parent
Applies to:
all elements
For
overlay scrollbars
the precise width of the
scrollbar gutter
, if present, is UA defined.
However, it must not be 0,
and it must not change based on user interactions with the page or the scrollbar
even if the scrollbar itself changes,
with the expectation that it covers
the width of the overlay scrollbar in its widest form,
to the extent that this is well defined.
The new values of this property have the following meaning:
always
The
scrollbar gutter
is always present when
overflow
is
scroll
hidden
, or
auto
regardless of the type of scrollbar or
of whether the box is overflowing.
scrollbar-gutter: always
can be bused to solve the problem
of (small) interactive elements near the edge of the element
getting covered by an appearing overlay scrollbar.
A representative case would be a basic todo list,
with each line starting with some text and ending with a right-aligned checkbox.
With a classic scrollbar, everything is fine,
but an overlay scrollbar could obscure the check boxes and make them hard to interact with.
Checkboxes adjacent to a classic scrollbar
Checkboxes and an overlay scrollbar
Overlay Scrollbar are typically transient and disappear when not interacted with,
so the checkboxes they cover are not impossible to use.
But when the scrollbar is shown it does get in the way,
and that makes for an awkward interaction.
The author might try and solve the problem by adding some right padding,
but (1) how much?,
and (2) that padding isn’t needed in the case of classic scrollbars.
scrollbar-gutter: always
solves this problem,
yielding an identical result in first case of classic scrollbars,
but adding the desired gutter with overlay scrollbars:
Checkboxes and an overlay scrollbar and
scrollbar-gutter: always
Apple is reluctant to add this value,
as authors may use it too broadly,
inserting gutters with overlay scrollbars even when not justified by interactive elements,
defeating the space-saving advantage of overlay scrollbars.
An alternative solution has been suggested:
as the focus is interactive elements,
maybe we could have a property that applies to the elements
that needs to avoid being under the scrollbar.
When turned on, it would enlarge the right or left margin of the element as appropriate
by just the right value
to push it out from under an overlay scrollbar if that’s where it would end up,
but would leave the element unchanged otherwise.
Possibly, an addition toggle would cause the element
to enlarge both its inline-end and inline-start margins or neither,
rather than just one.
This could typically be useful for block-level descendants of the scroller
with visible borders or background:
adding space on one side to avoid collisions with the overlay scrollbar
would make them look off-center when the scrollbar disappears.
Increasing the margin on both sides avoids that.
Yet another possibility is to have a choice between growing the margin to protect the element,
or growing the padding to protect the element’s content.
The syntax could be something like
scrollbar-avoid: none | [self | content] && both-edges?
An interesting consideration is that this may alleviate the need for
scrollbar-gutter: match-parent
as it seems that situations that would have been addressed by
scrollbar-gutter: stable
or
scrollbar-gutter: always
on the parent
and
scrollbar-gutter: match-parent
on the select children
could instead be addressed by leaving the parent as
scrollbar-gutter: auto
and using
scrollbar-avoid: self
or
scrollbar-avoid: content
on the relevant children.
match-parent
On a
block-level
box whose parent has a
scrollbar gutter
(or gutters on both edges),
this causes the box to have
scrollbar gutter
on the same side(s) and of the same width as its parent’s gutter(s).
Moreover,
that gutter is made to overlap that of the parent box.
If the box with
scrollbar-gutter: match-parent
has a non-zero border or margin
on the side where the gutter is expected,
then the size of that box’s gutter is
parent.gutter - child.border - child.margin
and the gutter+border+margin is what collapses with the parent’s gutter.
If the box with
scrollbar-gutter/ match-parent
is itself a
scroll container
depending on the type of scrollbars,
on its
overflow
property,
and on the other values of the
scrollbar-gutter
property,
it may need additional gutter for its own scrollbars.
This comes in addition to the amount of gutter added for the sake of the
match-parent
value
and does not collapse with the parent’s gutter.
A scroller with an child whose background intrudes into the gutter, thanks to
match-parent
match-parent
box inside a scroll container with classic scrollbars,
overflow: auto
, and
scrollbar-gutter: stable
A scrollable box with
match-parent
inside another scroll container
A scrollable box with
match-parent
inside another scroll container, with bidi
A scrollable box with
scrollbar-gutter:match-parent stable
inside another scroll container, with bidi
Note: The following table summarizes the interaction of
overflow
and
scrollbar-gutter
for different types of scrollbars,
showing in which case space is reserved for the
scrollbar gutter
Should space be reserved for the
scrollbar gutter
overflow
scrollbar-gutter
Classic scrollbars
Overlay scrollbars
(whether overflowing or not)
Overflowing
Not overflowing
scroll
auto
yes
yes
stable
yes
yes
always
yes
yes
yes
auto
auto
yes
stable
yes
yes
always
yes
yes
yes
hidden
auto
stable
yes
yes
always
yes
yes
yes
visible
clip
auto
stable
if
force
if
force
always
if
force
if
force
if
force
Appendix B: Privacy Considerations
This specification introduces no new privacy considerations.
Appendix C: Security Considerations
This specification introduces no new security considerations.
Changes
Recent Changes
Significant changes since the
June 2017 Working Draft
include:
Moved in the definition of
text-overflow
from
[CSS-UI-4]
Moved the core definition of
scrollbar-gutter
to
[CSS-OVERFLOW-3]
(it will be copied back here once this specification is undiffed)
and shift exploratory
scrollbar-gutter
extension ideas into an appendix.
Defined extension of
overflow
and
overflow-clip-margin
to apply to
replaced elements
How exactly this works is still
still under discussion
Issue 7144
Defined
longhands
for
overflow-clip-margin
Issue 7245
Change the
line-clamp
shorthand syntax to allow omitting the
max-lines
value
Issue 9368
Dropped the tentative
force
value for the
scrollbar-gutter
property.
Issue 9815
Establish an Independent Formatting Context when
continue: discard
is used.
Issue 10323
Blockify elements with
(-webkit-)line-clamp
display: -webkit-(inline-)box
and
-webkit-box-orient: vertical
Issue 10324
Changes Since Level 3
TBD
Acknowledgments
Thanks especially to the feedback from
Rossen Atanassov,
Bert Bos,
Andreu Botella,
Tantek Çelik,
John Daggett,
fantasai,
Daniel Glazman,
Vincent Hardy,
Håkon Wium Lie,
Peter Linss,
Robert O’Callahan,
Florian Rivoal,
Alan Stearns,
Steve Zilles,
and all the rest of the
www-style
community.
Conformance
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
[RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with
class="example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class="note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with

, like
this:
UAs MUST provide an accessible alternative.
Tests
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers
must
treat as invalid (and
ignore
as appropriate
) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents
must not
selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features,
the CSSWG recommends
following best practices
for the implementation of
unstable
features and
proprietary extensions
to CSS.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
always
, in § Unnumbered section
auto
value for block-ellipsis
, in § 4.2
value for continue
, in § 5.3
auto clamp point
, in § 5.3.1

, in § 5.1
block-ellipsis
, in § 4.2
block overflow ellipsis
, in § 4.2
clamp point
, in § 5.3.1
clip
, in § 4.1
collapse
, in § 5.3
continue
, in § 5.3
discard
, in § 5.3
ellipsis
, in § 4.1
fade
, in § 4.1
fade()
, in § 4.1

, in § 5.1

, in § 3.2
line-based clamp point
, in § 5.2
line-clamp
, in § 5.1
line-clamp container
, in § 5.3.1
match-parent
, in § Unnumbered section
max-lines
, in § 5.2
no-ellipsis
, in § 4.2
none
value for line-clamp
, in § 5.1
value for max-lines
, in § 5.2
overflow clip edge
, in § 3.2
overflow-clip-margin
, in § 3.2
overflow-clip-margin-block
, in § 3.2
overflow-clip-margin-block-end
, in § 3.2
overflow-clip-margin-block-start
, in § 3.2
overflow-clip-margin-bottom
, in § 3.2
overflow-clip-margin-inline
, in § 3.2
overflow-clip-margin-inline-end
, in § 3.2
overflow-clip-margin-inline-start
, in § 3.2
overflow-clip-margin-left
, in § 3.2
overflow-clip-margin-right
, in § 3.2
overflow-clip-margin-top
, in § 3.2

, in § 4.2
text-overflow
, in § 4.1

, in § 3.2
-webkit-legacy
value for continue
, in § 5.1.1
value for line-clamp
, in § 5.1
-webkit-line-clamp
, in § 5.1.1
Terms defined by reference
[]
defines the following terms:
strut
[COMPAT]
defines the following terms:
-webkit-box
-webkit-box-orient
-webkit-inline-box
[CSS-BACKGROUNDS-3]
defines the following terms:
outer box-shadow
[CSS-BOX-4]
defines the following terms:

border edge
content edge
margin
[CSS-BREAK-3]
defines the following terms:
break-after
break-before
break-inside
orphans
[CSS-BREAK-4]
defines the following terms:
forced break
fragmentation break
fragmentation container
fragmentation context
fragmented flow
region break
unforced break
widows
[CSS-CASCADE-5]
defines the following terms:
computed value
longhand
shorthand
specified value
UA style sheet
used value
[CSS-DISPLAY-4]
defines the following terms:
BFC
block container
block formatting context
block formatting context root
block-level
containing block chain
display
establish an independent formatting context
flow-root
in-flow
independent formatting context
inline formatting context
inline-block
invisible box
out of flow
out-of-flow
replaced
replaced element
visibility
[CSS-FLEXBOX-1]
defines the following terms:
flex container
[CSS-INLINE-3]
defines the following terms:
line box
root inline box
[CSS-MASKING-1]
defines the following terms:
mask-image
[CSS-MULTICOL-1]
defines the following terms:
overflow columns
[CSS-MULTICOL-2]
defines the following terms:
multi-column container
multi-column line
multi-column row
multicol container
[CSS-OVERFLOW-3]
defines the following terms:
auto
(for overflow)
auto
(for scrollbar-gutter)
clip
hidden
ink overflow
overflow
overflow-x
overflow-y
overlay scrollbars
scroll
scroll container
scrollable overflow
scrollable overflow area
scrollbar gutter
scrollbar-gutter
stable
visible
[CSS-OVERFLOW-4]
defines the following terms:
force
[CSS-PAGE-FLOATS-3]
defines the following terms:
float
[CSS-POSITION-3]
defines the following terms:
absolutely position
absolutely positioned box
positioned
[CSS-PSEUDO-4]
defines the following terms:
::first-letter
::first-line
[CSS-SIZING-3]
defines the following terms:
automatic block size
max-content
max-content size
min-content inline size
min-content size
[CSS-SYNTAX-3]
defines the following terms:
ignored
[CSS-TEXT-4]
defines the following terms:
balance
content language
overflow-wrap
soft wrap opportunity
text-wrap-mode
text-wrap-style
[CSS-VALUES-4]
defines the following terms:
&&





CSS-wide keywords
{A,B}
||
[CSS-WRITING-MODES-3]
defines the following terms:
direction
left
unicode-bidi
[CSS-WRITING-MODES-4]
defines the following terms:
block dimension
block size
end
inline size
line-left
line-right
logical height
start
writing mode
[CSS2]
defines the following terms:
line-height
[W3C-PROCESS]
defines the following terms:
at risk
recommendation
References
Normative References
[COMPAT]
Mike Taylor.
Compatibility Standard
. Living Standard. URL:
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper.
CSS Backgrounds and Borders Module Level 3
. URL:
[CSS-BOX-4]
Elika Etemad.
CSS Box Model Module Level 4
. URL:
[CSS-BREAK-3]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 3
. URL:
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 4
. URL:
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 5
. URL:
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 4
. URL:
[CSS-INLINE-3]
Elika Etemad.
CSS Inline Layout Module Level 3
. URL:
[CSS-MASKING-1]
Dirk Schulze; Brian Birtles; Tab Atkins Jr..
CSS Masking Module Level 1
. URL:
[CSS-MULTICOL-1]
Florian Rivoal; Rachel Andrew.
CSS Multi-column Layout Module Level 1
. URL:
[CSS-MULTICOL-2]
Florian Rivoal; Rachel Andrew.
CSS Multi-column Layout Module Level 2
. URL:
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal.
CSS Overflow Module Level 3
. URL:
[CSS-PAGE-FLOATS-3]
Johannes Wilm.
CSS Page Floats
. URL:
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr..
CSS Positioned Layout Module Level 3
. URL:
[CSS-PSEUDO-4]
Elika Etemad; Alan Stearns.
CSS Pseudo-Elements Module Level 4
. URL:
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad.
CSS Box Sizing Module Level 3
. URL:
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin.
CSS Syntax Module Level 3
. URL:
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal.
CSS Text Module Level 3
. URL:
[CSS-TEXT-4]
Elika Etemad; et al.
CSS Text Module Level 4
. URL:
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 3
. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. URL:
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 3
. URL:
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 4
. URL:
[CSS2]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[UAX29]
Josh Hadley.
Unicode Text Segmentation
. 17 August 2025. Unicode Standard Annex #29. URL:
Non-Normative References
[CSS-FLEXBOX-1]
Elika Etemad; Tab Atkins Jr.; Rossen Atanassov.
CSS Flexible Box Layout Module Level 1
. URL:
[CSS-OVERFLOW-4]
David Baron; Florian Rivoal; Elika Etemad.
CSS Overflow Module Level 4
. URL:
[CSS-PAGE-3]
Elika Etemad.
CSS Paged Media Module Level 3
. URL:
[CSS-REGIONS-1]
Rossen Atanassov; Alan Stearns.
CSS Regions Module Level 1
. URL:
[CSS-UI-4]
Tab Atkins Jr.; Florian Rivoal.
CSS Basic User Interface Module Level 4
. URL:
[W3C-PROCESS]
Elika J. Etemad (fantasai); Florian Rivoal.
W3C Process Document
. 18 August 2025. URL:
Property Index
Name
Value
Initial
Applies to
Inh.
%ages
Anim­ation type
Canonical order
Com­puted value
Logical property group
-webkit-line-clamp
none |
none
see individual properties
see individual properties
N/A
see individual properties
per grammar
see individual properties
block-ellipsis
no-ellipsis | auto |
no-ellipsis
block containers
yes
N/A
discrete
per grammar
specified value
continue
auto | discard | collapse
auto
block containers and multicol containers
no
N/A
discrete
per grammar
specified keyword
line-clamp
none | [ || <'block-ellipsis'>] -webkit-legacy?
none
see individual properties
see individual properties
N/A
see individual properties
per grammar
see individual properties
max-lines
none |
none
block containers which are also either line-clamp containers or fragmentation containers that capture region breaks
no
N/A
by computed value type
per grammar
the keyword none or an integer
overflow-clip-margin
||
0px
boxes to which overflow applies
no
see individual properties
see individual properties
per grammar
see individual properties
overflow-clip-margin-block
||
0px
boxes to which overflow applies
no
see individual properties
see individual properties
per grammar
see individual properties
overflow-clip-margin-block-end
||
0px
boxes to which overflow applies
no
see individual properties
per computed value if the values match; otherwise discrete
per grammar
the computed and a keyword
overflow-clip-margin
overflow-clip-margin-block-start
||
0px
boxes to which overflow applies
no
see individual properties
per computed value if the values match; otherwise discrete
per grammar
the computed and a keyword
overflow-clip-margin
overflow-clip-margin-bottom
||
0px
boxes to which overflow applies
no
see individual properties
per computed value if the values match; otherwise discrete
per grammar
the computed and a keyword
overflow-clip-margin
overflow-clip-margin-inline
||
0px
boxes to which overflow applies
no
see individual properties
see individual properties
per grammar
see individual properties
overflow-clip-margin-inline-end
||
0px
boxes to which overflow applies
no
see individual properties
per computed value if the values match; otherwise discrete
per grammar
the computed and a keyword
overflow-clip-margin
overflow-clip-margin-inline-start
||
0px
boxes to which overflow applies
no
see individual properties
per computed value if the values match; otherwise discrete
per grammar
the computed and a keyword
overflow-clip-margin
overflow-clip-margin-left
||
0px
boxes to which overflow applies
no
see individual properties
per computed value if the values match; otherwise discrete
per grammar
the computed and a keyword
overflow-clip-margin
overflow-clip-margin-right
||
0px
boxes to which overflow applies
no
see individual properties
per computed value if the values match; otherwise discrete
per grammar
the computed and a keyword
overflow-clip-margin
overflow-clip-margin-top
||
0px
boxes to which overflow applies
no
see individual properties
per computed value if the values match; otherwise discrete
per grammar
the computed and a keyword
overflow-clip-margin
text-overflow
[ clip | ellipsis | | fade | ]{1,2}
clip
block containers
no
refer to the width of the line box
by computed value type
per grammar
as specified, with lengths made absolute
Issues Index
Copy
Level 3 content
when final.
Copy
Level 3 content
when final.
Application of
overflow
to
replaced elements
is still being worked out.
[Issue #7144]
Application of
overflow-clip-margin
to
replaced elements
is still being worked out.
[Issue #7144]
This section might need to be re-synced against
[CSS-OVERFLOW-3]
Do we need to define the way
the fade out is calculated
so that the fading is identical across browsers?
It should probably be something like
mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0))
except applied to the relevant portion of the line only.
If the line box is too short
to display the fade effect at the desired length,
should we drop the effect,
or shrink the distance it is applied over until it fits,
or clip the end of the fade?
How should we deal with
things overflowing out of the line box,
or overlapping onto it?
Should fade apply to the logical content of the line,
or to the physical area of the line box,
or the intersection of both?
insert RTL example diagram here to illustrate note.
continue: discard
is meant to generalize and replace the
region-fragment
property from
[CSS-REGIONS-1]
Once it is sufficiently stable in this specification,
region-fragment
should be removed from the regions specification in favor of this.
Having the actual
clamp point
be the earlier of
the
line-based clamp point
and the
auto clamp point
, if both exist,
is a wanted behavior, but the syntax for it is still being worked out.
[Issue #12041]
Make sure effects on OM are well defined
[Issue #2970]
What about
positioned
elements whose static position is in the discarded content are not rendered?
See also discussions in the
Sydney F2F meeting
[Issue #2971]
This section documents current attempts
at extending the
scrollbar-gutter
property
to solve additional use cases.
However, it does not currently have consensus.
It is presented here to encourage discussion,
but non-experimental implementation is not recommended.
Apple is reluctant to add this value,
as authors may use it too broadly,
inserting gutters with overlay scrollbars even when not justified by interactive elements,
defeating the space-saving advantage of overlay scrollbars.
An alternative solution has been suggested:
as the focus is interactive elements,
maybe we could have a property that applies to the elements
that needs to avoid being under the scrollbar.
When turned on, it would enlarge the right or left margin of the element as appropriate
by just the right value
to push it out from under an overlay scrollbar if that’s where it would end up,
but would leave the element unchanged otherwise.
Possibly, an addition toggle would cause the element
to enlarge both its inline-end and inline-start margins or neither,
rather than just one.
This could typically be useful for block-level descendants of the scroller
with visible borders or background:
adding space on one side to avoid collisions with the overlay scrollbar
would make them look off-center when the scrollbar disappears.
Increasing the margin on both sides avoids that.
Yet another possibility is to have a choice between growing the margin to protect the element,
or growing the padding to protect the element’s content.
The syntax could be something like
scrollbar-avoid: none | [self | content] && both-edges?
An interesting consideration is that this may alleviate the need for
scrollbar-gutter: match-parent
as it seems that situations that would have been addressed by
scrollbar-gutter: stable
or
scrollbar-gutter: always
on the parent
and
scrollbar-gutter: match-parent
on the select children
could instead be addressed by leaving the parent as
scrollbar-gutter: auto
and using
scrollbar-avoid: self
or
scrollbar-avoid: content
on the relevant children.
TBD
MDN
-webkit-line-clamp
In all current engines.
Firefox
68+
Safari
5+
Chrome
6+
Opera
Edge
79+
Edge (Legacy)
17+
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
37+
Samsung Internet
Opera Mobile
CanIUse
Support:
Android Browser
2.1+
Baidu Browser
13.52+
Blackberry Browser
7+
Chrome
4+
Chrome for Android
147+
Edge
12+
Firefox
7+
Firefox for Android
150+
IE
6+
IE Mobile
10+
KaiOS Browser
2.5+
Opera
11+
Opera Mini
All
Opera Mobile
12.1+
QQ Browser
14.9+
Safari
3.1+
Safari on iOS
3.2+
Samsung Internet
4+
UC Browser for Android
15.5+
Source:
caniuse.com
as of 2026-04-22