CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>CSS Overflow Module Level 4</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 742f3d674, updated Mon Nov 4 14:56:54 2024 -0800" name="generator"> <link href="https://www.w3.org/TR/css-overflow-4/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="9b133cfacd7c302e773d6ae813ffc50df8f01ea2" name="revision"> <meta content="dark light" name="color-scheme"> <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css"> <style> table.source-demo-pair { width: 100%; } .in-cards-demo { width: 13em; height: 8em; padding: 4px; border: medium solid blue; margin: 6px; font: medium/1.3 Times New Roman, Times, serif; white-space: nowrap; } .bouncy-columns-demo { width: 6em; height: 10em; float: left; margin: 1em; font: medium/1.25 Times New Roman, Times, serif; white-space: nowrap; } .bouncy-columns-demo.one { background: aqua; color: black; transform: rotate(-3deg); } .bouncy-columns-demo.two { background: yellow; color: black; transform: rotate(3deg); } .article-font-inherit-demo { font: 1em/1.25 Times New Roman, Times, serif; white-space: nowrap; } .article-font-inherit-demo.one { width: 12em; font-size: 1.5em; margin-bottom: 1em; height: 4em; } .article-font-inherit-demo.two { width: 11em; margin-left: 5em; margin-right: 2em; } .dark-columns-demo { width: 6em; height: 10em; float: left; margin-right: 1em; font: medium/1.25 Times New Roman, Times, serif; white-space: nowrap; } .dark-columns-demo.one { background: aqua; color: black; } .dark-columns-demo.one :link { color: blue; } .dark-columns-demo.one :visited { color: purple; } .dark-columns-demo.two { background: navy; color: white; } .dark-columns-demo.two :link { color: aqua; } .dark-columns-demo.two :visited { color: fuchsia; } .article-max-lines-demo { font: 1em/1.25 Times New Roman, Times, serif; white-space: nowrap; } .article-max-lines-demo.one::first-letter { font-size: 2em; line-height: 0.9; } .article-max-lines-demo.one { font-size: 1.5em; width: 16em; } .article-max-lines-demo.two { width: 11.5em; float: left; margin-right: 1em; } .article-max-lines-demo.three { width: 11.5em; float: left; } .awesome-table td { padding: 5px; } .awesome-table { color: #000; background: #fff; margin: auto; } </style> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-caniuse-panel */ @media (max-width: 767px) { .caniuse-status { opacity: .1; transition: opacity .1s; } } :root { --caniuse-bg: #EEE; --caniuse-shadow: #999; --caniuse-nosupport-text: #ccc; --caniuse-partialsupport-text: #666; } @media (prefers-color-scheme: dark) { :root { --caniuse-bg: #222; --caniuse-shadow: #444; --caniuse-nosupport-text: #666; --caniuse-partialsupport-text: #bbb; } } .caniuse-status { background: var(--caniuse-bg, #EEE); border-radius: .25em; box-shadow: 0 0 3px var(--caniuse-shadow, #999); color: var(--text, black); font: 1em sans-serif; hyphens: none; max-width: min-content; overflow: hidden; padding: .2em; position: absolute; right: 0.3em; top: auto; width: fit-content; word-wrap: normal; z-index: 8; } .caniuse-status.unpositioned { display: none; } .caniuse-status.overlapping-main { opacity: .2; transition: opacity .1s; } .caniuse-status[open] { opacity: 1; z-index: 9; min-width: 9em; width: fit-content; } .caniuse-status:hover { outline: var(--text, black) 1px solid; opacity: 1; } .caniuse-status > summary { font-weight: normal; text-align: right; cursor: pointer; display: block; } .caniuse-status > p { font-size: 0.6em; margin: 0; padding: 0; clear: both; } .caniuse-status > p + p { padding-top: 0.5em; } .caniuse-status > .support { display: block; } .caniuse-status > .support > span { padding: 0.2em 0; display: block; display: table; } .caniuse-status > .support > span.partial { color: var(--caniuse-partialsupport-text, #666666); filter: grayscale(50%); } .caniuse-status > .support > span.no { color: var(--caniuse-nosupport-text, #CCCCCC); filter: grayscale(100%); } .caniuse-status > .support > span.no::before { opacity: 0.5; } .caniuse-status > .support > span:first-of-type { padding-top: 0.5em; } .caniuse-status > .support > span > span { padding: 0 0.5em; display: table-cell; vertical-align: top; } .caniuse-status > .support > span > span:first-child { width: 100%; } .caniuse-status > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .caniuse-status > .support > span::before { content: ' '; display: table-cell; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .caniuse-status > .support > .and_chr::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .caniuse-status > .support > .and_ff::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .caniuse-status > .support > .and_uc::before { background-image: url(https://resources.whatwg.org/browser-logos/uc.png); } /* UC Browser for Android */ .caniuse-status > .support > .android::before { background-image: url(https://resources.whatwg.org/browser-logos/android.svg); } .caniuse-status > .support > .bb::before { background-image: url(https://resources.whatwg.org/browser-logos/bb.jpg); } /* Blackberry Browser */ .caniuse-status > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .caniuse-status > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .caniuse-status > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .caniuse-status > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .caniuse-status > .support > .ie_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/ie-mobile.svg); } .caniuse-status > .support > .ios_saf::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .caniuse-status > .support > .op_mini::before { background-image: url(https://resources.whatwg.org/browser-logos/opera-mini.png); } .caniuse-status > .support > .op_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .caniuse-status > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .caniuse-status > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .caniuse-status > .support > .samsung::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .caniuse-status > .caniuse { text-align: right; font-style: italic; } @media (max-width: 767px) { .caniuse-status.wrapped { width: 9em; height: auto; } .caniuse-status:not(.wrapped) { height: 1em; max-width: min-content; } .caniuse-status.wrapped > :not(input) { display: block; } .caniuse-status:not(.wrapped) > :not(input) { display: none; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-mdn-anno */ :root { --mdn-bg: #EEE; --mdn-shadow: #999; --mdn-nosupport-text: #ccc; --mdn-pass: green; --mdn-fail: red; } @media (prefers-color-scheme: dark) { :root { --mdn-bg: #222; --mdn-shadow: #444; --mdn-nosupport-text: #666; --mdn-pass: #690; --mdn-fail: #d22; } } .mdn-anno { background: var(--mdn-bg, #EEE); border-radius: .25em; box-shadow: 0 0 3px var(--mdn-shadow, #999); color: var(--text, black); font: 1em sans-serif; hyphens: none; max-width: min-content; overflow: hidden; padding: 0.2em; position: absolute; right: 0.3em; top: auto; white-space: nowrap; word-wrap: normal; z-index: 8; } .mdn-anno.unpositioned { display: none; } .mdn-anno.overlapping-main { opacity: .2; transition: opacity .1s; } .mdn-anno[open] { opacity: 1; z-index: 9; min-width: 9em; } .mdn-anno:hover { opacity: 1; outline: var(--text, black) 1px solid; } .mdn-anno > summary { font-weight: normal; text-align: right; cursor: pointer; display: block; } .mdn-anno > summary > .less-than-two-engines-flag { color: var(--mdn-fail); padding-right: 2px; } .mdn-anno > summary > .all-engines-flag { color: var(--mdn-pass); padding-right: 2px; } .mdn-anno > summary > span { color: #fff; background-color: #000; font-weight: normal; font-family: zillaslab, Palatino, "Palatino Linotype", serif; padding: 2px 3px 0px 3px; line-height: 1.3em; vertical-align: top; } .mdn-anno > .feature { margin-top: 20px; } .mdn-anno > .feature:not(:first-of-type) { border-top: 1px solid #999; margin-top: 6px; padding-top: 2px; } .mdn-anno > .feature > .less-than-two-engines-text { color: var(--mdn-fail); } .mdn-anno > .feature > .all-engines-text { color: var(--mdn-pass); } .mdn-anno > .feature > p { font-size: .75em; margin-top: 6px; margin-bottom: 0; } .mdn-anno > .feature > p + p { margin-top: 3px; } .mdn-anno > .feature > .support { display: block; font-size: 0.6em; margin: 0; padding: 0; margin-top: 2px; } .mdn-anno > .feature > .support + div { padding-top: 0.5em; } .mdn-anno > .feature > .support > hr { display: block; border: none; border-top: 1px dotted #999; padding: 3px 0px 0px 0px; margin: 2px 3px 0px 3px; } .mdn-anno > .feature > .support > hr::before { content: ""; } .mdn-anno > .feature > .support > span { padding: 0.2em 0; display: block; display: table; } .mdn-anno > .feature > .support > span.no { color: var(--mdn-nosupport-text); filter: grayscale(100%); } .mdn-anno > .feature > .support > span.no::before { opacity: 0.5; } .mdn-anno > .feature > .support > span:first-of-type { padding-top: 0.5em; } .mdn-anno > .feature > .support > span > span { padding: 0 0.5em; display: table-cell; } .mdn-anno > .feature > .support > span > span:first-child { width: 100%; } .mdn-anno > .feature > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .mdn-anno > .feature > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .mdn-anno > .feature > .support > .chrome_android::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .firefox_android::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .edge_blink::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .mdn-anno > .feature > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge_legacy.svg); } .mdn-anno > .feature > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .mdn-anno > .feature > .support > .safari_ios::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .mdn-anno > .feature > .support > .nodejs::before { background-image: url(https://nodejs.org/static/images/favicons/favicon.ico); } .mdn-anno > .feature > .support > .opera_android::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .mdn-anno > .feature > .support > .samsunginternet_android::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .mdn-anno > .feature > .support > .webview_android::before { background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png); } .name-slug-mismatch { color: red; } .caniuse-status:hover { z-index: 9; } /* dt, li, .issue, .note, and .example are "position: relative", so to put annotation at right margin, must move to right of containing block */; .h-entry:not(.status-LS) dt > .mdn-anno, .h-entry:not(.status-LS) li > .mdn-anno, .h-entry:not(.status-LS) .issue > .mdn-anno, .h-entry:not(.status-LS) .note > .mdn-anno, .h-entry:not(.status-LS) .example > .mdn-anno { right: -6.7em; } .h-entry p + .mdn-anno { margin-top: 0; } h2 + .mdn-anno.after { margin: -48px 0 0 0; } h3 + .mdn-anno.after { margin: -46px 0 0 0; } h4 + .mdn-anno.after { margin: -42px 0 0 0; } h5 + .mdn-anno.after { margin: -40px 0 0 0; } h6 + .mdn-anno.after { margin: -40px 0 0 0; } </style> <style>/* Boilerplate: style-ref-hints */ :root { --ref-hint-bg: #ddd; --ref-hint-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --ref-hint-bg: #222; --ref-hint-text: var(--text); } } .ref-hint { display: inline-block; position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.5em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--ref-hint-bg); color: var(--ref-hint-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .ref-hint * { margin: 0; padding: 0; text-indent: 0; } .ref-hint ul { padding: 0 0 0 1em; list-style: none; } </style> <style>/* Boilerplate: style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <style>/* Boilerplate: style-syntax-highlighting */ code.highlight { padding: .1em; border-radius: .3em; } pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } c-[a] { color: #990055 } /* Keyword.Declaration */ c-[b] { color: #990055 } /* Keyword.Type */ c-[c] { color: #708090 } /* Comment */ c-[d] { color: #708090 } /* Comment.Multiline */ c-[e] { color: #0077aa } /* Name.Attribute */ c-[f] { color: #669900 } /* Name.Tag */ c-[g] { color: #222222 } /* Name.Variable */ c-[k] { color: #990055 } /* Keyword */ c-[l] { color: #000000 } /* Literal */ c-[m] { color: #000000 } /* Literal.Number */ c-[n] { color: #0077aa } /* Name */ c-[o] { color: #999999 } /* Operator */ c-[p] { color: #999999 } /* Punctuation */ c-[s] { color: #a67f59 } /* Literal.String */ c-[t] { color: #a67f59 } /* Literal.String.Single */ c-[u] { color: #a67f59 } /* Literal.String.Double */ c-[cp] { color: #708090 } /* Comment.Preproc */ c-[c1] { color: #708090 } /* Comment.Single */ c-[cs] { color: #708090 } /* Comment.Special */ c-[kc] { color: #990055 } /* Keyword.Constant */ c-[kn] { color: #990055 } /* Keyword.Namespace */ c-[kp] { color: #990055 } /* Keyword.Pseudo */ c-[kr] { color: #990055 } /* Keyword.Reserved */ c-[ld] { color: #000000 } /* Literal.Date */ c-[nc] { color: #0077aa } /* Name.Class */ c-[no] { color: #0077aa } /* Name.Constant */ c-[nd] { color: #0077aa } /* Name.Decorator */ c-[ni] { color: #0077aa } /* Name.Entity */ c-[ne] { color: #0077aa } /* Name.Exception */ c-[nf] { color: #0077aa } /* Name.Function */ c-[nl] { color: #0077aa } /* Name.Label */ c-[nn] { color: #0077aa } /* Name.Namespace */ c-[py] { color: #0077aa } /* Name.Property */ c-[ow] { color: #999999 } /* Operator.Word */ c-[mb] { color: #000000 } /* Literal.Number.Bin */ c-[mf] { color: #000000 } /* Literal.Number.Float */ c-[mh] { color: #000000 } /* Literal.Number.Hex */ c-[mi] { color: #000000 } /* Literal.Number.Integer */ c-[mo] { color: #000000 } /* Literal.Number.Oct */ c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ c-[sc] { color: #a67f59 } /* Literal.String.Char */ c-[sd] { color: #a67f59 } /* Literal.String.Doc */ c-[se] { color: #a67f59 } /* Literal.String.Escape */ c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ c-[si] { color: #a67f59 } /* Literal.String.Interpol */ c-[sx] { color: #a67f59 } /* Literal.String.Other */ c-[sr] { color: #a67f59 } /* Literal.String.Regex */ c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ c-[vc] { color: #0077aa } /* Name.Variable.Class */ c-[vg] { color: #0077aa } /* Name.Variable.Global */ c-[vi] { color: #0077aa } /* Name.Variable.Instance */ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ @media (prefers-color-scheme: dark) { .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } c-[a] { color: #d33682 } /* Keyword.Declaration */ c-[b] { color: #d33682 } /* Keyword.Type */ c-[c] { color: #2aa198 } /* Comment */ c-[d] { color: #2aa198 } /* Comment.Multiline */ c-[e] { color: #268bd2 } /* Name.Attribute */ c-[f] { color: #b58900 } /* Name.Tag */ c-[g] { color: #cb4b16 } /* Name.Variable */ c-[k] { color: #d33682 } /* Keyword */ c-[l] { color: #657b83 } /* Literal */ c-[m] { color: #657b83 } /* Literal.Number */ c-[n] { color: #268bd2 } /* Name */ c-[o] { color: #657b83 } /* Operator */ c-[p] { color: #657b83 } /* Punctuation */ c-[s] { color: #6c71c4 } /* Literal.String */ c-[t] { color: #6c71c4 } /* Literal.String.Single */ c-[u] { color: #6c71c4 } /* Literal.String.Double */ c-[ch] { color: #2aa198 } /* Comment.Hashbang */ c-[cp] { color: #2aa198 } /* Comment.Preproc */ c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ c-[c1] { color: #2aa198 } /* Comment.Single */ c-[cs] { color: #2aa198 } /* Comment.Special */ c-[kc] { color: #d33682 } /* Keyword.Constant */ c-[kn] { color: #d33682 } /* Keyword.Namespace */ c-[kp] { color: #d33682 } /* Keyword.Pseudo */ c-[kr] { color: #d33682 } /* Keyword.Reserved */ c-[ld] { color: #657b83 } /* Literal.Date */ c-[nc] { color: #268bd2 } /* Name.Class */ c-[no] { color: #268bd2 } /* Name.Constant */ c-[nd] { color: #268bd2 } /* Name.Decorator */ c-[ni] { color: #268bd2 } /* Name.Entity */ c-[ne] { color: #268bd2 } /* Name.Exception */ c-[nf] { color: #268bd2 } /* Name.Function */ c-[nl] { color: #268bd2 } /* Name.Label */ c-[nn] { color: #268bd2 } /* Name.Namespace */ c-[py] { color: #268bd2 } /* Name.Property */ c-[ow] { color: #657b83 } /* Operator.Word */ c-[mb] { color: #657b83 } /* Literal.Number.Bin */ c-[mf] { color: #657b83 } /* Literal.Number.Float */ c-[mh] { color: #657b83 } /* Literal.Number.Hex */ c-[mi] { color: #657b83 } /* Literal.Number.Integer */ c-[mo] { color: #657b83 } /* Literal.Number.Oct */ c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ c-[sc] { color: #6c71c4 } /* Literal.String.Char */ c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ c-[se] { color: #6c71c4 } /* Literal.String.Escape */ c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ c-[sx] { color: #6c71c4 } /* Literal.String.Other */ c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ c-[fm] { color: #268bd2 } /* Name.Function.Magic */ c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ } </style> <style>/* Boilerplate: style-wpt */ :root { --wpt-border: hsl(0, 0%, 60%); --wpt-bg: hsl(0, 0%, 95%); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 30%); } @media (prefers-color-scheme: dark) { :root { --wpt-border: hsl(0, 0%, 30%); --wpt-bg: var(--borderedblock-bg); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 60%); } } .wpt-tests-block { list-style: none; border-left: .5em solid var(--wpt-border); background: var(--wpt-bg); color: var(--wpt-text); margin: 1em auto; padding: .5em; } .wpt-tests-block summary { color: var(--wptheading-text); font-weight: normal; text-transform: uppercase; } .wpt-tests-block summary::marker{ color: var(--wpt-border); } .wpt-tests-block summary:hover::marker{ color: var(--wpt-text); } /* The only content of a wpt test block in its closed state is the <summary>, which contains the word TESTS, and that is absolutely positioned. In that closed state, wpt test blocks are styled to have a top margin whose height is exactly equal to the height of the absolutely positioned <summary>, and no other background/padding/margin/border. The wpt test block elements will therefore allow the maring of the previous/next block elements to collapse through them; if this combined margin would be larger than its own top margin, it stays as is, and therefore the pre-existing vertical rhythm of the document is undisturbed. If that combined margin would be smaller, it is grown to that size. This means that the wpt test block ensures that there's always enough vertical space to insert the summary, without adding more than is needed. */ .wpt-tests-block:not([open]){ padding: 0; border: none; background: none; font-size: 0.75em; line-height: 1; position: relative; margin: 1em 0 0; } .wpt-tests-block:not([open]) summary { position: absolute; right: 0; bottom: 0; } /* It is possible that both the last child of a block element and the block element itself would be annotated with a <wpt> block each. If the block element has a padding or a border, that's fine, but otherwise the bottom margin of the block and of its last child would collapse and both <wpt> elements would overlap, being both placed there. To avoid that, add 1px of padding to the <wpt> element annotating the last child to prevent the bottom margin of the block and of its last child from collapsing (and as much negative margin, as wel only want to prevent margin collapsing, but are not trying to actually take more space). */ .wpt-tests-block:not([open]):last-child { padding-bottom: 1px; margin-bottom: -1px; } /* Exception to the previous rule: don't do that in non-last list items, because it's not necessary, and would therefore consume more space than strictly needed. Lists must have list items as children, not <wpt> elements, so a <wpt> element cannot be a sibling of a list item, and the collision that the previous rule avoids cannot happen. */ li:not(:last-child) > .wpt-tests-block:not([open]):last-child, dd:not(:last-child) > .wpt-tests-block:not([open]):last-child { padding-bottom: 0; margin-bottom: 0; } .wpt-tests-block:not([open]):not(:hover){ opacity: 0.5; } .wpt-tests-list { list-style: none; display: grid; margin: 0; padding: 0; grid-template-columns: 1fr max-content auto auto; grid-column-gap: .5em; } .wpt-tests-block hr:last-child { display: none; } .wpt-test { display: contents; } .wpt-test > a { text-decoration: underline; border: none; } .wpt-test > .wpt-name { grid-column: 1; } .wpt-test > .wpt-results { grid-column: 2; } .wpt-test > .wpt-live { grid-column: 3; } .wpt-test > .wpt-source { grid-column: 4; } .wpt-test > .wpt-results { display: flex; gap: .1em; } .wpt-test .wpt-result { display: inline-block; height: 1em; width: 1em; border-radius: 50%; position: relative; } </style> <body class="h-entry"> <div class="head"> <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> </p> <h1 class="p-name no-ref" id="title">CSS Overflow Module Level 4</h1> <p id="w3c-state"><a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2024-11-04">4 November 2024</time></p> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://drafts.csswg.org/css-overflow-4/">https://drafts.csswg.org/css-overflow-4/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-overflow-4/">https://www.w3.org/TR/css-overflow-4/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-overflow-4">CSSWG Issues Repository</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="15393"><a class="p-name fn u-url url" href="https://dbaron.org/">L. David Baron</a> (<a class="p-org org" href="https://www.mozilla.org/">Mozilla</a>) <dd class="editor p-author h-card vcard" data-editor-id="43241"><a class="p-name fn u-url url" href="http://florian.rivoal.net/">Florian Rivoal</a> (<span class="p-org org">On behalf of Bloomberg</span>) <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Apple</span>) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-overflow-4/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2024 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr><sup>®</sup> <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. </p> <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2> <p>This module contains the features of CSS relating to scrollable overflow handling in visual media. It builds on the <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>, defining <a class="property css" data-link-type="property" href="#propdef-line-clamp" id="ref-for-propdef-line-clamp">line-clamp</a>, its longhands, and its legacy pre-standard syntax; adding a <a class="property css" data-link-type="property" href="#propdef-block-ellipsis" id="ref-for-propdef-block-ellipsis">block-ellipsis</a> property; and expanding <a class="property css" data-link-type="property" href="#propdef-overflow-clip-margin" id="ref-for-propdef-overflow-clip-margin">overflow-clip-margin</a> with longhands.</p> <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. <script> const githubPrefix = "https://w3c.github.io/csswg-drafts/"; if(location.href.slice(0, githubPrefix.length) == githubPrefix) { const suffix = location.href.slice(githubPrefix.length); const draftUrl = "https://drafts.csswg.org/" + suffix; window.location.replace(draftUrl); } </script> </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd"><span class="content">Status of this document</span></h2> <div data-fill-with="status"> <p> 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. </p> <p>Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-overflow” in the title, like this: “[css-overflow] <i>…summary of comment…</i>”. All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-overflow%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. </p> <p>This document is governed by the <a href="https://www.w3.org/policies/process/20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</a>. </p> <p></p> </div> <div data-fill-with="at-risk"></div> <nav data-fill-with="table-of-contents" id="toc"> <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> <ol class="toc" role="directory"> <li> <a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a> <ol class="toc"> <li><a href="#values"><span class="secno">1.1</span> <span class="content"> Value Definitions</span></a> <li><a href="#placement"><span class="secno">1.2</span> <span class="content"> Module Interactions</span></a> </ol> <li><a href="#overflow-concepts"><span class="secno">2</span> <span class="content"> Overflow Concepts and Terminology</span></a> <li> <a href="#overflow-properties"><span class="secno">3</span> <span class="content"> Scrolling and Clipping Overflow</span></a> <ol class="toc"> <li><a href="#overflow-control"><span class="secno">3.1</span> <span class="content"> Managing Overflow: the <span class="property">overflow-x</span>, <span class="property">overflow-y</span>, and <span class="property">overflow</span> properties</span></a> <li><a href="#overflow-clip-margin"><span class="secno">3.2</span> <span class="content"> Expanding Clipping Bounds: the <span class="property">overflow-clip-margin-*</span> properties</span></a> </ol> <li> <a href="#auto-ellipsis"><span class="secno">4</span> <span class="content"> Automatic Ellipses</span></a> <ol class="toc"> <li><a href="#text-overflow"><span class="secno">4.1</span> <span class="content"> Inline Overflow Ellipsis: the <span class="property">text-overflow</span> property</span></a> <li><a href="#block-ellipsis"><span class="secno">4.2</span> <span class="content"> Indicating Block-Axis Overflow: the <span class="property">block-ellipsis</span> property</span></a> </ol> <li> <a href="#fragmentating-overflow"><span class="secno">5</span> <span class="content"> Fragmenting Overflow</span></a> <ol class="toc"> <li> <a href="#line-clamp"><span class="secno">5.1</span> <span class="content"> Limiting Visible Lines: the <span class="property">line-clamp</span> shorthand property</span></a> <ol class="toc"> <li><a href="#webkit-line-clamp"><span class="secno">5.1.1</span> <span class="content"> Legacy compatibility</span></a> </ol> <li><a href="#max-lines"><span class="secno">5.2</span> <span class="content"> Forcing a Break After a Set Number of Lines: the <span class="property">max-lines</span> property</span></a> <li><a href="#continue"><span class="secno">5.3</span> <span class="content"> Fragmentation of Overflow: the <span class="property">continue</span> property</span></a> </ol> <li><a href="#sbg-ext"><span class="secno"></span> <span class="content"> Appendix A: Possible extensions for <span class="css">scrollbar-gutter</span></span></a> <li><a href="#privclass=nonum"><span class="secno"></span> <span class="content"> Appendix B: Privacy Considerations</span></a> <li><a href="#sec"><span class="secno"></span> <span class="content"> Appendix C: Security Considerations</span></a> <li> <a href="#changes"><span class="secno"></span> <span class="content"> Changes</span></a> <ol class="toc"> <li><a href="#recent-changes"><span class="secno"></span> <span class="content"> Recent Changes</span></a> <li><a href="#changes-l3"><span class="secno"></span> <span class="content"> Changes Since Level 3</span></a> </ol> <li><a href="#acknowledgments"><span class="secno"></span> <span class="content"> Acknowledgments</span></a> <li> <a href="#w3c-conformance"><span class="secno"></span> <span class="content"> Conformance</span></a> <ol class="toc"> <li><a href="#w3c-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a> <li><a href="#w3c-conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a> <li> <a href="#w3c-partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a> </ol> <li><a href="#w3c-testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a> </ol> <li> <a href="#index"><span class="secno"></span> <span class="content">Index</span></a> <ol class="toc"> <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a> <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a> </ol> <li> <a href="#references"><span class="secno"></span> <span class="content">References</span></a> <ol class="toc"> <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a> <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a> </ol> <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a> <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2> <p>This specification extends <a data-link-type="biblio" href="#biblio-css-overflow-3" title="CSS Overflow Module Level 3">[CSS-OVERFLOW-3]</a>. It contains several primary sections:</p> <dl> <dt data-md><a href="#overflow-properties">Overflow Scrolling and Clipping Controls</a> <dd data-md> <p>This section defines relatively simple extensions to the <a class="property css" data-link-type="property">overflow-*</a> properties <a href="https://drafts.csswg.org/css-overflow-3/#overflow-properties">in Level 3</a>.</p> <dt data-md><a href="#auto-ellipsis">Automatic Ellipses</a>. <dd data-md> <p>This section defines some experimental extensions to the <a class="property css" data-link-type="property">*-ellipsis</a> properties <a href="https://drafts.csswg.org/css-overflow-3/#auto-ellipsis">in Level 3</a>.</p> </dl> <p class="note" role="note"><span class="marker">Note:</span> At the time of writing, <a data-link-type="biblio" href="#biblio-css-overflow-3" title="CSS Overflow Module Level 3">[CSS-OVERFLOW-3]</a> 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.</p> <h3 class="heading settled" data-level="1.1" id="values"><span class="secno">1.1. </span><span class="content"> Value Definitions</span><a class="self-link" href="#values"></a></h3> <p>This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from <a data-link-type="biblio" href="#biblio-css-values-3" title="CSS Values and Units Module Level 3">[CSS-VALUES-3]</a>. Value types not defined in this specification are defined in CSS Values & Units <span title="CSS Values and Units Module Level 3">[CSS-VALUES-3]</span>. Combination with other CSS modules may expand the definitions of these value types.</p> <p>In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> as their property value. For readability they have not been repeated explicitly.</p> <h3 class="heading settled" data-level="1.2" id="placement"><span class="secno">1.2. </span><span class="content"> Module Interactions</span><a class="self-link" href="#placement"></a></h3> <p>This module extends features defined in <a data-link-type="biblio" href="#biblio-css-overflow-3" title="CSS Overflow Module Level 3">[CSS-OVERFLOW-3]</a>.</p> <h2 class="heading settled" data-level="2" id="overflow-concepts"><span class="secno">2. </span><span class="content"> Overflow Concepts and Terminology</span><a class="self-link" href="#overflow-concepts"></a></h2> <p class="issue" id="issue-50246bc5"><a class="self-link" href="#issue-50246bc5"></a> Copy <a href="https://drafts.csswg.org/css-overflow-3/#overflow-concepts">Level 3 content</a> when final.</p> <h2 class="heading settled" data-level="3" id="overflow-properties"><span class="secno">3. </span><span class="content"> Scrolling and Clipping Overflow</span><a class="self-link" href="#overflow-properties"></a></h2> <p class="issue" id="issue-50246bc5①"><a class="self-link" href="#issue-50246bc5①"></a> Copy <a href="https://drafts.csswg.org/css-overflow-3/#overflow-properties">Level 3 content</a> when final.</p> <h3 class="heading settled" data-level="3.1" id="overflow-control"><span class="secno">3.1. </span><span class="content"> Managing Overflow: the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow-x" id="ref-for-propdef-overflow-x">overflow-x</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow-y" id="ref-for-propdef-overflow-y">overflow-y</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> properties</span><a class="self-link" href="#overflow-control"></a></h3> <p>This level extends the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow-x" id="ref-for-propdef-overflow-x①">overflow-x</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow-y" id="ref-for-propdef-overflow-y①">overflow-y</a> properties (and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow①">overflow</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property">shorthand</a>) to apply to <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element" id="ref-for-replaced-element">replaced elements</a>.</p> <p>On <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element" id="ref-for-replaced-element①">replaced elements</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value">used values</a> of all computed values other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible" id="ref-for-valdef-overflow-visible">visible</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-clip" id="ref-for-valdef-overflow-clip">clip</a>. Host languages should define <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua" id="ref-for-cascade-origin-ua">UA style sheet</a> rules that apply a default value of <span class="css" id="ref-for-valdef-overflow-clip①">clip</span> to such elements and set their <a class="property css" data-link-type="property" href="#propdef-overflow-clip-margin" id="ref-for-propdef-overflow-clip-margin①">overflow-clip-margin</a> to <span class="css">content-box</span>.</p> <p class="note" role="note"><span class="marker">Note:</span> Application of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow②">overflow</a> to <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element" id="ref-for-replaced-element②">replaced elements</a> 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 <a href="https://github.com/w3c/csswg-drafts/issues/7058">Issue 7059</a> and <a href="https://github.com/w3c/csswg-drafts/issues/7144">Issue 7144</a>. This is a change from <a href="https://www.w3.org/TR/CSS2/">CSS2.1</a> and is at-risk.</p> <p class="issue" id="issue-1b75d3f8"><a class="self-link" href="#issue-1b75d3f8"></a> Application of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow③">overflow</a> to <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element" id="ref-for-replaced-element③">replaced elements</a> is still being worked out. <a href="https://github.com/w3c/csswg-drafts/issues/7144">[Issue #7144]</a></p> <h3 class="heading settled" data-level="3.2" id="overflow-clip-margin"><span class="secno">3.2. </span><span class="content"> Expanding Clipping Bounds: the <a class="property css" data-link-type="property">overflow-clip-margin-*</a> properties</span><a class="self-link" href="#overflow-clip-margin"></a></h3> <table class="def propdef" data-link-for-hint="overflow-clip-margin-top"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-overflow-clip-margin-top">overflow-clip-margin-top</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-overflow-clip-margin-right">overflow-clip-margin-right</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-overflow-clip-margin-bottom">overflow-clip-margin-bottom</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-overflow-clip-margin-left">overflow-clip-margin-left</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-overflow-clip-margin-block-start">overflow-clip-margin-block-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-overflow-clip-margin-inline-start">overflow-clip-margin-inline-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-overflow-clip-margin-block-end">overflow-clip-margin-block-end</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-overflow-clip-margin-inline-end">overflow-clip-margin-inline-end</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-box-4/#typedef-visual-box" id="ref-for-typedef-visual-box"><visual-box></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value"><length [0,∞]></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td><span class="css">0px</span> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>boxes to which <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow④">overflow</a> applies <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>the computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value①"><length></a> and a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-box-4/#typedef-visual-box" id="ref-for-typedef-visual-box①"><visual-box></a> keyword <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>per computed value if the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-box-4/#typedef-visual-box" id="ref-for-typedef-visual-box②"><visual-box></a> values match; otherwise discrete <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://drafts.csswg.org/css-logical-1/#logical-property-group">Logical property group:</a> <td><a class="css" data-link-type="property" href="#propdef-overflow-clip-margin" id="ref-for-propdef-overflow-clip-margin②">overflow-clip-margin</a> </table> <table class="def propdef" data-link-for-hint="overflow-clip-margin"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-overflow-clip-margin">overflow-clip-margin</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-overflow-clip-margin-inline">overflow-clip-margin-inline</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-overflow-clip-margin-block">overflow-clip-margin-block</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-box-4/#typedef-visual-box" id="ref-for-typedef-visual-box③"><visual-box></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any①">||</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value②"><length [0,∞]></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td><span class="css">0px</span> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>boxes to which <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow⑤">overflow</a> applies <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> <p>These properties and their shorthands define the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="overflow-clip-edge">overflow clip edge</dfn> of the box, i.e. precisely <em>how far</em> outside its bounds the box’s content is allowed to paint before being clipped by effects (such as <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow⑥">overflow: clip</a>, above) that are defined to clip to the box’s <a data-link-type="dfn" href="#overflow-clip-edge" id="ref-for-overflow-clip-edge">overflow clip edge</a>. The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property①">shorthand</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#longhand" id="ref-for-longhand">longhand</a> relationships are as for <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin" id="ref-for-propdef-margin">margin</a>, but note that the <span id="ref-for-shorthand-property②">shorthands</span> have a restricted syntax.</p> <p>Values are defined as follows:</p> <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="overflow-clip-margin" data-dfn-type="value" data-export id="valdef-overflow-clip-margin-visual-box"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-box-4/#typedef-visual-box" id="ref-for-typedef-visual-box④"><visual-box></a></dfn> <dd data-md> <p>Specifies the box edge to use as the <a data-link-type="dfn" href="#overflow-clip-edge" id="ref-for-overflow-clip-edge①">overflow clip edge</a> origin, i.e. when the specified offset is zero.</p> <p>If omitted, defaults to <span class="css">padding-box</span> on non-<a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element" id="ref-for-replaced-element④">replaced</a> elements, or <span class="css">content-box</span> on <span id="ref-for-replaced-element⑤">replaced</span> elements.</p> <p class="issue" id="issue-3d19a60f"><a class="self-link" href="#issue-3d19a60f"></a> Application of <a class="property css" data-link-type="property" href="#propdef-overflow-clip-margin" id="ref-for-propdef-overflow-clip-margin③">overflow-clip-margin</a> to <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element" id="ref-for-replaced-element⑥">replaced elements</a> is still being worked out. <a href="https://github.com/w3c/csswg-drafts/issues/7144">[Issue #7144]</a></p> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="overflow-clip-margin" data-dfn-type="value" data-export id="valdef-overflow-clip-margin-length-0"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value③"><length [0,∞]></a></dfn> <dd data-md> <p>The specified offset dictates how much the <a data-link-type="dfn" href="#overflow-clip-edge" id="ref-for-overflow-clip-edge②">overflow clip edge</a> is expanded from the specified box edge Negative values are invalid. Defaults to zero if omitted.</p> </dl> <p>The <a data-link-type="dfn" href="#overflow-clip-edge" id="ref-for-overflow-clip-edge③">overflow clip edge</a> is shaped in the corners exactly the same way as an <a data-link-type="dfn" href="https://drafts.csswg.org/css-backgrounds-3/#box-shadow-outer-box-shadow" id="ref-for-box-shadow-outer-box-shadow">outer box-shadow</a> with a spread radius of the same cumulative offset from the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-edge" id="ref-for-border-edge">border edge</a>. See <a href="https://drafts.csswg.org/css-backgrounds-3/#corner-shaping"><cite>CSS Backgrounds 3</cite> § 4.2 Corner Shaping</a> and <a href="https://drafts.csswg.org/css-backgrounds-3/#shadow-shape"><cite>CSS Backgrounds 3</cite> § 6.1.1 Shadow Shape, Spread, and Knockout</a>, noting in particular the formula for outsets beyond the <span id="ref-for-border-edge①">border edge</span>.</p> <p class="note" role="note"><span class="marker">Note:</span> This property has no effect on boxes with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow⑦">overflow: hidden</a> or <span class="css" id="ref-for-propdef-overflow⑧">overflow: scroll</span>, which are not defined to use the <a data-link-type="dfn" href="#overflow-clip-edge" id="ref-for-overflow-clip-edge④">overflow clip edge</a>.</p> <h2 class="heading settled" data-level="4" id="auto-ellipsis"><span class="secno">4. </span><span class="content"> Automatic Ellipses</span><a class="self-link" href="#auto-ellipsis"></a></h2> <h3 class="heading settled caniuse-paneled" data-level="4.1" id="text-overflow"><span class="secno">4.1. </span><span class="content"> Inline Overflow Ellipsis: the <a class="property css" data-link-type="property" href="#propdef-text-overflow" id="ref-for-propdef-text-overflow">text-overflow</a> property</span><a class="self-link" href="#text-overflow"></a></h3> <table class="def propdef" data-link-for-hint="text-overflow"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-overflow">text-overflow</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[ clip <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> ellipsis <span id="ref-for-comb-one①">|</span> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#string-value" id="ref-for-string-value"><string></a> <span id="ref-for-comb-one②">|</span> fade <span id="ref-for-comb-one③">|</span> <a class="production css" data-link-type="function" href="#funcdef-text-overflow-fade" id="ref-for-funcdef-text-overflow-fade"><fade()></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,2}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>clip <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>block containers <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>refer to the width of the line box <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified, with lengths made absolute <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type </table> <p class="issue" id="issue-304ea7d9"><a class="self-link" href="#issue-304ea7d9"></a> This section might need to be re-synced against <a data-link-type="biblio" href="#biblio-css-overflow-3" title="CSS Overflow Module Level 3">[CSS-OVERFLOW-3]</a>.</p> <p>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 <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow⑨">overflow</a> other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible" id="ref-for-valdef-overflow-visible①">visible</a>.</p> <p>Even though this property is not inherited, anonymous block container boxes generated to establish the line box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#inline-formatting-context" id="ref-for-inline-formatting-context">inline formatting context</a> (see <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container">block container</a>) are ignored, and the value of the property that applies is the one on the non anonymous box. <span class="note">This can be seen in the “nested paragraph” part of <a href="#example-44082941">example 7</a>: even though the word “NESTED” is wrapped in an anonymous block container whose <a class="property css" data-link-type="property" href="#propdef-text-overflow" id="ref-for-propdef-text-overflow①">text-overflow</a> property has the initial value, it is ellipsed.</span></p> <p>Text can overflow for example when it is prevented from wrapping (e.g. due to <code class="lang-css highlight"><c- k>white-space</c-><c- p>:</c-> nowrap</code> or a single word is too long to fit). Values have the following meanings:</p> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="text-overflow" data-dfn-type="value" data-export id="overflow-clip">clip</dfn> <dd> Clip inline content that overflows its block container element. Characters may be only partially rendered. <dt><dfn class="dfn-paneled css" data-dfn-for="text-overflow" data-dfn-type="value" data-export id="overflow-ellipsis">ellipsis</dfn> <dd> 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. <dt id="overflow-string"><a class="self-link" href="#overflow-string"></a><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#string-value" id="ref-for-string-value①"><string></a> <dd> Render the given string to represent clipped inline content. The given string is treated as an independent paragraph for bidi purposes. <dt><dfn class="dfn-paneled css" data-dfn-for="text-overflow" data-dfn-type="function" data-export data-lt="fade()" id="funcdef-text-overflow-fade">fade( [ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage"><length-percentage></a> ] )</dfn> <dd> 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. <p class="issue" id="issue-ebe65138"><a class="self-link" href="#issue-ebe65138"></a> 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 <a class="css" data-link-type="propdesc" href="https://drafts.fxtf.org/css-masking-1/#propdef-mask-image" id="ref-for-propdef-mask-image">mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0))</a>, except applied to the relevant portion of the line only.</p> <p>The argument determines the distance over which the fade effect is applied. The <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value"><percentage></a> 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.</p> <p class="issue" id="issue-2e22b1d9"><a class="self-link" href="#issue-2e22b1d9"></a> 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?</p> <p class="issue" id="issue-948cb1ee"><a class="self-link" href="#issue-948cb1ee"></a> 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?</p> <dt><dfn class="dfn-paneled css" data-dfn-for="text-overflow" data-dfn-type="value" data-export id="valdef-text-overflow-fade">fade</dfn> <dd> Same as <a class="css" data-link-type="maybe" href="#funcdef-text-overflow-fade" id="ref-for-funcdef-text-overflow-fade①">fade()</a>, but the distance over which the fading effect is applied is determined by the UA. <span class="css">1em</span> is suggested as a reasonable value. </dl> <p>The term "character" is used in this property definition for better readability and means "grapheme cluster" <a data-link-type="biblio" href="#biblio-uax29" title="Unicode Text Segmentation">[UAX29]</a> for implementation purposes.</p> <p>If there is one value, it applies only to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#css-end" id="ref-for-css-end">end</a> line box edge. If there are two values, the first value applies to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-left" id="ref-for-line-left">line-left</a> edge, and the second value applies to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-right" id="ref-for-line-right">line-right</a> edge. The terms <span id="ref-for-css-end①">end</span>, <span id="ref-for-line-left①">line-left</span> and <span id="ref-for-line-right①">line-right</span> are defined in <a data-link-type="biblio" href="#biblio-css-writing-modes-3" title="CSS Writing Modes Level 3">[CSS-WRITING-MODES-3]</a>.</p> <p class="note" role="note"><span class="marker">Note:</span> the use of <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-left" id="ref-for-line-left②">line-left</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#line-right" id="ref-for-line-right②">line-right</a> rather than <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#css-start" id="ref-for-css-start">start</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#css-end" id="ref-for-css-end②">end</a> when there are two values is intentional, to facilitate the use of directional characters such as arrows.</p> <p>For the ellipsis and string values, implementations must hide characters and <a href="https://www.w3.org/TR/CSS2/visuren.html#inline-boxes"> atomic inline-level elements</a> 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 <a href="https://www.w3.org/TR/CSS2/visuren.html#inline-boxes"> atomic inline-level element</a> on a line must be clipped rather than ellipsed.</p> <div class="example" id="example-160d0058"> <a class="self-link" href="#example-160d0058"></a> <h3 class="no-num no-toc heading settled" id="bidi-ellipsis"><span class="content">Bidi ellipsis examples</span><a class="self-link" href="#bidi-ellipsis"></a></h3> <p>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.</p> <p>Sample CSS:</p> <pre><code class="highlight">div <c- p>{</c-> <c- k>font-family</c-><c- p>:</c-> monospace<c- p>;</c-> <c- k>white-space</c-><c- p>:</c-> pre<c- p>;</c-> <c- k>overflow</c-><c- p>:</c-> hidden<c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- m>9</c-><c- k>ch</c-><c- p>;</c-> <c- k>text-overflow</c-><c- p>:</c-> ellipsis<c- p>;</c-> <c- p>}</c-> </code></pre> <p>Sample HTML fragments, renderings, and your browser:</p> <table class="awesome-table data"> <thead> <tr> <th>HTML <th>Reference rendering <th>Your Browser <tbody> <tr> <td><code class="highlight"><c- p><</c-><c- f>div</c-><c- p>></c->שלום 123456<c- p></</c-><c- f>div</c-><c- p>></c-></code> <td> <div style="font-family:monospace">123456 ם…</div> <td> <div style="font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis">שלום 123456</div> <tr> <td><code class="highlight"><c- p><</c-><c- f>div</c-> <c- e>dir</c-><c- o>=</c-><c- s>rtl</c-><c- p>></c->שלום 123456<c- p></</c-><c- f>div</c-><c- p>></c-></code> <td> <div style="font-family:monospace">…456 שלום</div> <td> <div dir="rtl" style="font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis">שלום 123456</div> </table> </div> <h3 class="no-num no-toc heading settled" id="ellipsing-details"><span class="content"> ellipsing details</span><a class="self-link" href="#ellipsing-details"></a></h3> <ul> <li> 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 <a class="property css" data-link-type="property" href="#propdef-text-overflow" id="ref-for-propdef-text-overflow②">text-overflow</a> had been <span class="css">none</span>. <li> The ellipsis is styled and baseline-aligned according to the block. <li> Ellipsing occurs after relative positioning and other graphical transformations. <li> 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 <span class="css">text-overflow:clip</span> value). </ul> <h3 class="no-num no-toc heading settled" id="ellipsis-interaction"><span class="content"> user interaction with ellipsis</span><a class="self-link" href="#ellipsis-interaction"></a></h3> <ul> <li> When the user is interacting with content (e.g. editing, selecting, scrolling), the user agent may treat <a class="css" data-link-type="maybe" href="#overflow-ellipsis" id="ref-for-overflow-ellipsis">ellipsis</a>, string values, <span class="css">fade</span> or <span class="css">fade()</span> as <span class="css">text-overflow:clip</span>. <li> 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. </ul> <div class="example" id="example-44082941"> <a class="self-link" href="#example-44082941"></a> <h3 class="no-num no-toc heading settled" id="text-overflow-examples"><span class="content">text-overflow examples</span><a class="self-link" href="#text-overflow-examples"></a></h3> <p>These examples demonstrate setting the text-overflow of a block container element that has text which overflows its dimensions:</p> <p>sample CSS for a div:</p> <pre><code class="lang-css highlight">div <c- p>{</c-> <c- k>font-family</c-><c- p>:</c-> Helvetica<c- p>,</c-> sans-serif<c- p>;</c-> <c- k>line-height</c-><c- p>:</c-> <c- m>1.1</c-><c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- m>3.1</c-><c- k>em</c-><c- p>;</c-> <c- k>border</c-><c- p>:</c-> solid <c- m>.1</c-><c- k>em</c-> black<c- p>;</c-> <c- k>padding</c-><c- p>:</c-> <c- m>0.2</c-><c- k>em</c-><c- p>;</c-> <c- k>margin</c-><c- p>:</c-><c- m>1</c-><c- k>em</c-> <c- m>0</c-><c- p>;</c-> <c- p>}</c-> </code></pre> <p>sample HTML fragments, renderings, and your browser:</p> <table class="awesome-table"> <tbody> <tr> <th>HTML <th>sample rendering <th>your browser <tr> <td> <pre><code class="lang-markup highlight"><c- p><</c-><c- f>div</c-><c- p>></c-> CSS IS AWESOME, YES <c- p></</c-><c- f>div</c-><c- p>></c-> </code></pre> <td> <object data="images/cssisawesome.png" type="image/png"> First, a box with text drawing outside of it. </object> <td> <div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1;">CSS IS AWESOME, YES</div> <tr> <td> <pre><code class="lang-markup highlight"><c- p><</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"</c-><strong><c- s>text-overflow:clip;</c-></strong><c- s> overflow:hidden"</c-><c- p>></c-> CSS IS AWESOME, YES <c- p></</c-><c- f>div</c-><c- p>></c-> </code></pre> <td> <object data="images/cssisaweso.png" type="image/png"> Second, a similar box with the text clipped outside the box. </object> <td> <div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:clip;">CSS IS AWESOME, YES</div> <tr> <td> <pre><code class="lang-markup highlight"><c- p><</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"</c-><strong><c- s>text-overflow:ellipsis;</c-></strong><c- s> overflow:hidden"</c-><c- p>></c-> CSS IS AWESOME, YES <c- p></</c-><c- f>div</c-><c- p>></c-> </code></pre> <td> <object data="images/cssisaw.png" type="image/png"> Third, a similar box with an ellipsis representing the clipped text. </object> <td> <div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:ellipsis;">CSS IS AWESOME, YES</div> <tr> <td> <pre><code class="lang-markup highlight"><c- p><</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"</c-><strong><c- s>text-overflow:ellipsis;</c-></strong><c- s> overflow:hidden"</c-><c- p>></c-> NESTED <c- p><</c-><c- f>p</c-><c- p>></c->PARAGRAPH<c- p></</c-><c- f>p</c-><c- p>></c-> WON’T ELLIPSE. <c- p></</c-><c- f>div</c-><c- p>></c-> </code></pre> <td> <object data="images/nes.png" type="image/png"> Fourth, a box with a nested paragraph demonstrating anonymous block boxes equivalency and non-inheritance into a nested element. </object> <td> <div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:ellipsis;"> NESTED <p>PARAGRAPH</p> WON’T ELLIPSE. </div> <tr> <td> <pre><code class="lang-markup highlight"><c- p><</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"</c-><strong><c- s>text-overflow:fade;</c-></strong><c- s> overflow:hidden"</c-><c- p>></c-> CSS IS AWESOME, YES <c- p></</c-><c- f>div</c-><c- p>></c-> </code></pre> <td> <object data="images/cssisfade.png" type="image/png"> a box with the text fading out on overflow. </object> <td> <div style="width:3.1em; border:solid .1em black; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:clip;">CSS IS AWESOME, YES</div> </table> </div> <p class="note" role="note"><span class="marker">Note:</span> the side of the line that the ellipsis is placed depends on the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a> of the block. E.g. an overflow hidden right-to-left (<code class="lang-css highlight"><c- k>direction</c-><c- p>:</c-> rtl</code>) block clips inline content on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#physical-left" id="ref-for-physical-left">left</a> side, thus would place a text-overflow ellipsis on the <span id="ref-for-physical-left①">left</span> to represent that clipped content.</p> <p class="issue" id="issue-4b5212a2"><a class="self-link" href="#issue-4b5212a2"></a> insert RTL example diagram here to illustrate note.</p> <h3 class="no-num no-toc heading settled" id="ellipsis-scrolling"><span class="content"> ellipsis interaction with scrolling interfaces</span><a class="self-link" href="#ellipsis-scrolling"></a></h3> <p>This section applies to elements with text-overflow other than <span class="css">text-overflow:clip</span> (non-clip text-overflow) and overflow:scroll.</p> <p>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:</p> <p>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.</p> <div class="example" id="example-45d2531f"> <a class="self-link" href="#example-45d2531f"></a> This example uses text-overflow on an element with overflow scroll to demonstrate the above described behavior. <p>sample CSS:</p> <pre><code class="lang-css highlight">div.crawlbar <c- p>{</c-> <c- k>text-overflow</c-><c- p>:</c-> ellipsis<c- p>;</c-> <c- k>height</c-><c- p>:</c-> <c- m>2</c-><c- k>em</c-><c- p>;</c-> <c- k>overflow</c-><c- p>:</c-> scroll<c- p>;</c-> <c- k>white-space</c-><c- p>:</c-> nowrap<c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- m>15</c-><c- k>em</c-><c- p>;</c-> <c- k>border</c-><c- p>:</c-><c- m>1</c-><c- k>em</c-> solid black<c- p>;</c-> <c- p>}</c-> </code></pre> <p>sample HTML fragment:</p> <pre><code class="lang-markup highlight"><c- p><</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"crawlbar"</c-><c- p>></c-> CSS is awesome, especially when you can scroll to see extra text instead of just having it overlap other text by default. <c- p></</c-><c- f>div</c-><c- p>></c-> </code></pre> <p>demonstration of sample CSS and HTML:</p> <div style="text-overflow: ellipsis; height: 2em; overflow: scroll; white-space: nowrap; width: 15em; border:1em solid black;"> CSS is awesome, especially when you can scroll to see extra text instead of just having it overlap other text by default. </div> </div> <p>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 <a class="property css" data-link-type="property" href="#propdef-text-overflow" id="ref-for-propdef-text-overflow③">text-overflow</a> 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 <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#css-start" id="ref-for-css-start①">start</a> (rather than <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#css-end" id="ref-for-css-end③">end</a>) of the block’s direction (per the direction property).</p> <p>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).</p> <div class="example" id="example-347bbb66"> <a class="self-link" href="#example-347bbb66"></a> Same as previous example except with <code>text-overflow: ellipsis ellipsis</code>, demonstrated: <div style="text-overflow: ellipsis ellipsis; height: 2em; overflow: scroll; white-space: nowrap; width: 15em; border:1em solid black;"> CSS is awesome, especially when you can scroll to see extra text instead of just having it overlap other text by default. </div> </div> <p>If there is insufficient space for both start and end ellipses/strings, then only the end ellipsis/string should be rendered.</p> <h3 class="heading settled" data-level="4.2" id="block-ellipsis"><span class="secno">4.2. </span><span class="content"> Indicating Block-Axis Overflow: the <a class="property css" data-link-type="property" href="#propdef-block-ellipsis" id="ref-for-propdef-block-ellipsis①">block-ellipsis</a> property</span><a class="self-link" href="#block-ellipsis"></a></h3> <table class="def propdef" data-link-for-hint="block-ellipsis"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-block-ellipsis">block-ellipsis</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> auto <span id="ref-for-comb-one⑤">|</span> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#string-value" id="ref-for-string-value②"><string></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container①">block containers</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> <p>This property allows inserting content into the last line box before a (forced <em>or</em> unforced) <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#region-break" id="ref-for-region-break">region break</a> to indicate the continuity of truncated/interrupted content. It only affects line boxes contained directly by the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container②">block container</a> itself, but as it inherits, will have an effect on descendants’ line boxes unless overridden. If the box contains no line box immediately preceding a <span id="ref-for-region-break①">region break</span>, then this property has no effect.</p> <p class="note" role="note"><span class="marker">Note:</span> See <a href="https://www.w3.org/TR/css-overflow-4/#fragmentation"><cite>CSS Overflow 4</cite> § A Redirection of Overflow</a> for a way to generate boxes with such a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#region-break" id="ref-for-region-break②">region break</a>.</p> <p class="issue" id="issue-23a7778c"><a class="self-link" href="#issue-23a7778c"></a> Should this apply to other types of fragmentation breaks (e.g. pages, columns)?</p> <p>The inserted content is called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="block-overflow-ellipsis">block overflow ellipsis</dfn>. Values have the following meanings:</p> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="block-ellipsis" data-dfn-type="value" data-export id="valdef-block-ellipsis-none">none</dfn> <dd> The rendering is unaffected. <dt><dfn class="dfn-paneled css" data-dfn-for="block-ellipsis" data-dfn-type="value" data-export id="valdef-block-ellipsis-auto">auto</dfn> <dd> Render an ellipsis character (U+2026)—or a more typographically-appropriate equivalent—as the <a data-link-type="dfn" href="#block-overflow-ellipsis" id="ref-for-block-overflow-ellipsis">block overflow ellipsis</a> at the end of the affected line box. UAs should use the conventions of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#content-language" id="ref-for-content-language">content language</a>, writing system, and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode">writing mode</a> to determine the most appropriate ellipsis string. <dt><dfn class="dfn-paneled css" data-dfn-for="block-ellipsis" data-dfn-type="value" data-export id="valdef-block-ellipsis-string"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#string-value" id="ref-for-string-value③"><string></a></dfn> <dd> Render the specified string as the <a data-link-type="dfn" href="#block-overflow-ellipsis" id="ref-for-block-overflow-ellipsis①">block overflow ellipsis</a> at the end of the affected line box. The UA may truncate this string if it is absurdly long. </dl> <p>When <a class="property css" data-link-type="property" href="#propdef-block-ellipsis" id="ref-for-propdef-block-ellipsis②">block-ellipsis</a> is not <a class="css" data-link-type="maybe" href="#valdef-block-ellipsis-none" id="ref-for-valdef-block-ellipsis-none">none</a>, the <a data-link-type="dfn" href="#block-overflow-ellipsis" id="ref-for-block-overflow-ellipsis②">block overflow ellipsis</a> string is wrapped in an anonymous inline and placed at the end of the line box as a direct child of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container③">block container</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-inline-3/#root-inline-box" id="ref-for-root-inline-box">root inline box</a>, reducing the space in the line box available to the other contents of the line. This inline is assigned <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi">unicode-bidi: plaintext</a> and <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height">line-height: 0</a> and is placed in the line box after the last <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#soft-wrap-opportunity" id="ref-for-soft-wrap-opportunity">soft wrap opportunity</a> (see <a data-link-type="biblio" href="#biblio-css-text-3" title="CSS Text Module Level 3">[CSS-TEXT-3]</a>) that would still allow the entire <span id="ref-for-block-overflow-ellipsis③">block overflow ellipsis</span> to fit on the line. For this purpose, <span id="ref-for-soft-wrap-opportunity①">soft wrap opportunities</span> added by <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-4/#propdef-overflow-wrap" id="ref-for-propdef-overflow-wrap">overflow-wrap</a> are ignored. If this results in the entire contents of the line box being displaced, the line box is considered to contain a <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/visudet.html#strut" id="ref-for-strut">strut</a>, as defined in <a href="https://drafts.csswg.org/css2//visudet#leading">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification § visudet#leading</a>. Text <a href="https://www.w3.org/TR/css-text-3/#justification">alignment and justification</a> occurs after placement, and measures the inserted <span id="ref-for-block-overflow-ellipsis④">block overflow ellipsis</span> together with the rest of the line’s content.</p> <p class="note" role="note"><span class="marker">Note:</span> Setting the <a data-link-type="dfn" href="#block-overflow-ellipsis" id="ref-for-block-overflow-ellipsis⑤">block overflow ellipsis</a>'s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height①">line-height</a> to <span class="css">0</span> 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 <span id="ref-for-block-overflow-ellipsis⑥">block overflow ellipsis</span> as a paint-time operation, except that it still participates in alignment and justification. The downside is that unusually tall / deep glyphs in the <span id="ref-for-block-overflow-ellipsis⑦">block overflow ellipsis</span> may overflow.</p> <p>The <a data-link-type="dfn" href="#block-overflow-ellipsis" id="ref-for-block-overflow-ellipsis⑧">block overflow ellipsis</a> must not be included in either the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter">::first-letter</a> nor the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line" id="ref-for-selectordef-first-line">::first-line</a> pseudo-elements.</p> <p>If there is a subsequent <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-container" id="ref-for-fragmentation-container">fragmentation container</a> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-context" id="ref-for-fragmentation-context">fragmentation context</a> that would receive subsequent content, then the content displaced by the <a data-link-type="dfn" href="#block-overflow-ellipsis" id="ref-for-block-overflow-ellipsis⑨">block overflow ellipsis</a> must be pushed to that <span id="ref-for-fragmentation-container①">fragmentation container</span>.</p> <p>The UA must treat the <a data-link-type="dfn" href="#block-overflow-ellipsis" id="ref-for-block-overflow-ellipsis①⓪">block overflow ellipsis</a> as an unbreakable string, If any part of the <span id="ref-for-block-overflow-ellipsis①①">block overflow ellipsis</span> overflows, it is treated as <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow" id="ref-for-scrollable-overflow">scrollable overflow</a>, and its rendering is affected by the <a class="property css" data-link-type="property" href="#propdef-text-overflow" id="ref-for-propdef-text-overflow④">text-overflow</a> property.</p> <p>The <a data-link-type="dfn" href="#block-overflow-ellipsis" id="ref-for-block-overflow-ellipsis①②">block overflow ellipsis</a> does not capture events: pointer events are dispatched to whatever is underneath it.</p> <p>It also has no effect on the intrinsic size of the box: its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content">min-content</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content">max-content</a> sizes are calculated exactly as if <a class="property css" data-link-type="property" href="#propdef-block-ellipsis" id="ref-for-propdef-block-ellipsis③">block-ellipsis</a> were <a class="css" data-link-type="maybe" href="#valdef-block-ellipsis-none" id="ref-for-valdef-block-ellipsis-none①">none</a>.</p> <p class="note" role="note"><span class="marker">Note:</span> Future specifications may extend this feature, for example by providing an <span class="css">::ellipsis</span> 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).</p> <h2 class="heading settled" data-level="5" id="fragmentating-overflow"><span class="secno">5. </span><span class="content"> Fragmenting Overflow</span><a class="self-link" href="#fragmentating-overflow"></a></h2> <h3 class="heading settled" data-level="5.1" id="line-clamp"><span class="secno">5.1. </span><span class="content"> Limiting Visible Lines: the <a class="property css" data-link-type="property" href="#propdef-line-clamp" id="ref-for-propdef-line-clamp①">line-clamp</a> shorthand property</span><a class="self-link" href="#line-clamp"></a></h3> <table class="def propdef" data-link-for-hint="line-clamp"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-line-clamp">line-clamp</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value"><integer [1,∞]></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any②">||</a> <a class="production css" data-link-type="property" href="#propdef-block-ellipsis" id="ref-for-propdef-block-ellipsis④"><'block-ellipsis'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> <p>The <a class="property css" data-link-type="property" href="#propdef-line-clamp" id="ref-for-propdef-line-clamp②">line-clamp</a> property is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property③">shorthand</a> for the <a class="property css" data-link-type="property" href="#propdef-max-lines" id="ref-for-propdef-max-lines">max-lines</a>, <a class="property css" data-link-type="property" href="#propdef-block-ellipsis" id="ref-for-propdef-block-ellipsis⑤">block-ellipsis</a>, and <a class="property css" data-link-type="property" href="#propdef-continue" id="ref-for-propdef-continue">continue</a> properties.</p> <p class="issue" id="issue-ebb2947d"><a class="self-link" href="#issue-ebb2947d"></a> For the time being, experimental implementations are encouraged to follow the full behavior defined by this shorthand and its longhands, but to only expose the shorthand to authors. This is in order to facilitate further tweaking, and in particular potential renaming, of the longhand properties and their values.</p> <p>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.</p> <p>The values have the following meaning:</p> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="line-clamp" data-dfn-type="value" data-export id="valdef-line-clamp-none">none</dfn> <dd>Sets <a class="property css" data-link-type="property" href="#propdef-max-lines" id="ref-for-propdef-max-lines①">max-lines</a> to <a class="css" data-link-type="maybe" href="#valdef-max-lines-none" id="ref-for-valdef-max-lines-none">none</a>, <a class="property css" data-link-type="property" href="#propdef-continue" id="ref-for-propdef-continue①">continue</a> to <a class="css" data-link-type="maybe" href="#valdef-continue-auto" id="ref-for-valdef-continue-auto">auto</a>, and <a class="property css" data-link-type="property" href="#propdef-block-ellipsis" id="ref-for-propdef-block-ellipsis⑥">block-ellipsis</a> to <a class="css" data-link-type="maybe" href="#valdef-block-ellipsis-none" id="ref-for-valdef-block-ellipsis-none②">none</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="line-clamp" data-dfn-type="value" data-export id="valdef-line-clamp-integer-1"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value①"><integer [1,∞]></a></dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="line-clamp" data-dfn-type="value" data-export id="valdef-line-clamp-block-ellipsis"><<a class="property css" data-link-type="property" href="#propdef-block-ellipsis" id="ref-for-propdef-block-ellipsis⑦">block-ellipsis</a>></dfn> <dd> Sets <a class="property css" data-link-type="property" href="#propdef-continue" id="ref-for-propdef-continue②">continue</a> to <a class="css" data-link-type="maybe" href="#valdef-continue-discard" id="ref-for-valdef-continue-discard">discard</a> if either or both values ares specified. <p>Sets <a class="property css" data-link-type="property" href="#propdef-max-lines" id="ref-for-propdef-max-lines②">max-lines</a> to the specified <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value②"><integer></a> or to <a class="css" data-link-type="maybe" href="#valdef-max-lines-none" id="ref-for-valdef-max-lines-none①">none</a> if omitted, and <a class="property css" data-link-type="property" href="#propdef-block-ellipsis" id="ref-for-propdef-block-ellipsis⑧">block-ellipsis</a> to other component of the value if specified or to <a class="css" data-link-type="maybe" href="#valdef-block-ellipsis-auto" id="ref-for-valdef-block-ellipsis-auto">auto</a> if omitted.</p> </dl> <p>See the corresponding longhand properties for details about how this mechanism operates.</p> <div class="example" id="example-7a152e86"> <a class="self-link" href="#example-7a152e86"></a> 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)”: <pre class="highlight">li <c- p>{</c-> <c- k>line-clamp</c-><c- p>:</c-> <c- m>5</c-> <c- s>"… (continued on next page)"</c-><c- p>;</c-> <c- p>}</c-> strong <c- p>{</c-> <c- k>display</c-><c- p>:</c-> block<c- p>;</c-> <c- k>text-transform</c-><c- p>:</c-> uppercase<c- p>;</c-> <c- p>}</c-> </pre> <pre class="highlight"><c- p><</c-><c- f>li</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"cheese-is-milk"</c-><c- p>></c-> <c- p><</c-><c- f>strong</c-><c- p>></c->Cheese is Actually Made of Milk!<c- p></</c-><c- f>strong</c-><c- p>></c-> 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. <c- p></</c-><c- f>a</c-><c- p>></</c-><c- f>li</c-><c- p>></c-> </pre> <p>Sample rendering:</p> <pre class="figure">+---------------------------------------+ | 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) | +---------------------------------------+ </pre> </div> <h4 class="heading settled" data-level="5.1.1" id="webkit-line-clamp"><span class="secno">5.1.1. </span><span class="content"> Legacy compatibility</span><a class="self-link" href="#webkit-line-clamp"></a></h4> <p>For compatibility with legacy content, UAs that support <a class="property css" data-link-type="property" href="#propdef-line-clamp" id="ref-for-propdef-line-clamp③">line-clamp</a> must also support the <a class="property css" data-link-type="property" href="#propdef--webkit-line-clamp" id="ref-for-propdef--webkit-line-clamp">-webkit-line-clamp</a> property and the additional <a class="css" data-link-type="maybe" href="#valdef-continue--webkit-discard" id="ref-for-valdef-continue--webkit-discard">-webkit-discard</a> value for the <a class="property css" data-link-type="property" href="#propdef-continue" id="ref-for-propdef-continue③">continue</a> property.</p> <table class="def propdef" data-link-for-hint="-webkit-line-clamp"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef--webkit-line-clamp">-webkit-line-clamp</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value③"><integer [1,∞]></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> <table class="def propdef partial" data-link-for-hint="continue"> <tbody> <tr> <th>Name: <td><a class="css" data-link-type="property" href="#propdef-continue" id="ref-for-propdef-continue④">continue</a> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">New values:</a> <td class="prod">-webkit-discard </table> <p>Like <a class="property css" data-link-type="property" href="#propdef-line-clamp" id="ref-for-propdef-line-clamp④">line-clamp</a>, <a class="property css" data-link-type="property" href="#propdef--webkit-line-clamp" id="ref-for-propdef--webkit-line-clamp①">-webkit-line-clamp</a> is a shorthand of <a class="property css" data-link-type="property" href="#propdef-max-lines" id="ref-for-propdef-max-lines③">max-lines</a>, <a class="property css" data-link-type="property" href="#propdef-continue" id="ref-for-propdef-continue⑤">continue</a>, and <a class="property css" data-link-type="property" href="#propdef-block-ellipsis" id="ref-for-propdef-block-ellipsis⑨">block-ellipsis</a>, except that:</p> <ul> <li data-md> <p>its syntax is <a class="css" data-link-type="maybe" href="#valdef-line-clamp-none" id="ref-for-valdef-line-clamp-none">none</a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value④"><integer [1,∞]></a></p> <li data-md> <p>it sets <a class="property css" data-link-type="property" href="#propdef-continue" id="ref-for-propdef-continue⑥">continue</a> to <a class="css" data-link-type="maybe" href="#valdef-continue--webkit-discard" id="ref-for-valdef-continue--webkit-discard①">-webkit-discard</a> instead of <a class="css" data-link-type="maybe" href="#valdef-continue-discard" id="ref-for-valdef-continue-discard①">discard</a></p> <li data-md> <p>it unconditionally sets <a class="property css" data-link-type="property" href="#propdef-block-ellipsis" id="ref-for-propdef-block-ellipsis①⓪">block-ellipsis</a> to <a class="css" data-link-type="maybe" href="#valdef-block-ellipsis-auto" id="ref-for-valdef-block-ellipsis-auto①">auto</a></p> </ul> <p>The <dfn class="dfn-paneled css" data-dfn-for="continue" data-dfn-type="value" data-export id="valdef-continue--webkit-discard">-webkit-discard</dfn> value behaves identically to <a class="css" data-link-type="maybe" href="#valdef-continue-discard" id="ref-for-valdef-continue-discard②">discard</a>, except that it only takes effect if the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#specified-value" id="ref-for-specified-value">specified value</a> of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display">display</a> property is <a class="css" data-link-type="maybe" href="https://compat.spec.whatwg.org/#valdef-flex--webkit-box" id="ref-for-valdef-flex--webkit-box">-webkit-box</a> or <a class="css" data-link-type="maybe" href="https://compat.spec.whatwg.org/#valdef-flex--webkit-inline-box" id="ref-for-valdef-flex--webkit-inline-box">-webkit-inline-box</a> and the value of the <a class="property css" data-link-type="property" href="https://compat.spec.whatwg.org/#propdef--webkit-box-orient" id="ref-for-propdef--webkit-box-orient">-webkit-box-orient</a> property is <span class="css">vertical</span>.</p> <p class="note" role="note"><span class="marker">Note:</span> Implementations of the legacy <a class="property css" data-link-type="property" href="#propdef--webkit-line-clamp" id="ref-for-propdef--webkit-line-clamp②">-webkit-line-clamp</a> property have not behaved identically to what is specified here. The historical behavior is quirky and less robust, as documented for example in <a href="https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5">this blog post</a>. 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.</p> <h3 class="heading settled" data-level="5.2" id="max-lines"><span class="secno">5.2. </span><span class="content"> Forcing a Break After a Set Number of Lines: the <a class="property css" data-link-type="property" href="#propdef-max-lines" id="ref-for-propdef-max-lines④">max-lines</a> property</span><a class="self-link" href="#max-lines"></a></h3> <table class="def propdef" data-link-for-hint="max-lines"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-max-lines">max-lines</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-max-lines-none" id="ref-for-valdef-max-lines-none②">none</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value⑤"><integer [1,∞]></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td><a class="css" data-link-type="maybe" href="#valdef-max-lines-none" id="ref-for-valdef-max-lines-none③">none</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container④">block containers</a> which are also <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-container" id="ref-for-fragmentation-container②">fragmentation containers</a> that capture <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#region-break" id="ref-for-region-break③">region breaks</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-max-lines-none" id="ref-for-valdef-max-lines-none④">none</a> or an integer <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type </table> <p>This property only has an effect on boxes that are <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-container" id="ref-for-fragmentation-container③">fragmentation containers</a> that capture <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#region-break" id="ref-for-region-break④">region breaks</a>.</p> <p>Also, if the value of <a class="property css" data-link-type="property" href="#propdef-max-lines" id="ref-for-propdef-max-lines⑤">max-lines</a> is not <dfn class="dfn-paneled css" data-dfn-for="max-lines" data-dfn-type="value" data-export id="valdef-max-lines-none">none</dfn>, a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#region-break" id="ref-for-region-break⑤">region break</a> is forced after its <var>N</var>th descendant <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#in-flow" id="ref-for-in-flow">in-flow</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-inline-3/#line-box" id="ref-for-line-box">line box</a>, where <var>N</var> is the specified value of <span class="property" id="ref-for-propdef-max-lines⑥">max-lines</span>. Only lines boxes in the same <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-formatting-context" id="ref-for-block-formatting-context">Block Formatting Context</a> are counted: the contents of descendants that establish <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#independent-formatting-context" id="ref-for-independent-formatting-context">independent formatting contexts</a> are skipped over while counting line boxes.</p> <p>If fewer than <var>N</var> line boxes exist, then <a class="property css" data-link-type="property" href="#propdef-max-lines" id="ref-for-propdef-max-lines⑦">max-lines</a> introduces no <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#region-break" id="ref-for-region-break⑥">region break</a>.</p> <p class="note" role="note"><span class="marker">Note:</span> This implies that <a class="property css" data-link-type="property" href="#propdef-max-lines" id="ref-for-propdef-max-lines⑧">max-lines</a> has no effect when applied to <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container">multi-column containers</a>, since any line box they contain are nested into <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#independent-formatting-context" id="ref-for-independent-formatting-context①">independent formatting contexts</a>.</p> <p>Only positive integers are accepted. Zero or negative integers are invalid and must cause the declaration to be <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-ignored" id="ref-for-css-ignored">ignored</a>.</p> <p class="note" role="note"><span class="marker">Note:</span> The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-4/#propdef-widows" id="ref-for-propdef-widows">widows</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-orphans" id="ref-for-propdef-orphans">orphans</a>, and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-inside" id="ref-for-propdef-break-inside">break-inside</a> properties do not affect the position of the forced <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#region-break" id="ref-for-region-break⑦">region break</a> introduced by the <a class="property css" data-link-type="property" href="#propdef-max-lines" id="ref-for-propdef-max-lines⑨">max-lines</a> property.</p> <div class="note" role="note"> Note: Despite the “region break” name, this is not a dependency on <a data-link-type="biblio" href="#biblio-css-regions-1" title="CSS Regions Module Level 1">[CSS-REGIONS-1]</a>. The word “region” is only used as a classifier for forced breaks: they can be “page breaks” (breaks across pages <a data-link-type="biblio" href="#biblio-css-page-3" title="CSS Paged Media Module Level 3">[css-page-3]</a>), “column breaks” (breaks across multi-column layout columns <a data-link-type="biblio" href="#biblio-css-multicol-1" title="CSS Multi-column Layout Module Level 1">[css-multicol-1]</a>), or “region breaks” (breaks across any other kind of CSS-induced <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-container" id="ref-for-fragmentation-container④">fragmentation containers</a>). <p>If an implementation supports neither <a data-link-type="biblio" href="#biblio-css-regions-1" title="CSS Regions Module Level 1">[CSS-REGIONS-1]</a> nor <a href="https://www.w3.org/TR/css-overflow-4/#fragmentation"><cite>CSS Overflow 4</cite> § A Redirection of Overflow</a>, 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 <span title="CSS Regions Module Level 1">[CSS-REGIONS-1]</span> functionality. All that is needed is:</p> <ul> <li data-md> <p>be able to fragment</p> <li data-md> <p>classify these fragmentation containers as “Category 3” (i.e. not pages nor columns) for the purpose of forced breaks.</p> </ul> </div> <h3 class="heading settled" data-level="5.3" id="continue"><span class="secno">5.3. </span><span class="content"> Fragmentation of Overflow: the <a class="property css" data-link-type="property" href="#propdef-continue" id="ref-for-propdef-continue⑦">continue</a> property</span><a class="self-link" href="#continue"></a></h3> <table class="def propdef" data-link-for-hint="continue"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-continue">continue</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> discard <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td><a class="css" data-link-type="maybe" href="#valdef-continue-auto" id="ref-for-valdef-continue-auto①">auto</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container⑤">block containers</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①">multicol containers</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> <p>The <a class="property css" data-link-type="property" href="#propdef-continue" id="ref-for-propdef-continue⑧">continue</a> property gives authors the ability to turn a box into a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-container" id="ref-for-fragmentation-container⑤">fragmentation container</a> (see <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[CSS-BREAK-3]</a>) and to specify that content after the <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-break" id="ref-for-fragmentation-break">fragmentation break</a> must be discarded.</p> <p class="issue" id="issue-fe5938c8"><a class="self-link" href="#issue-fe5938c8"></a> This property is meant to generalize and replace the <code>region-fragment</code> property from <a data-link-type="biblio" href="#biblio-css-regions-1" title="CSS Regions Module Level 1">[CSS-REGIONS-1]</a>. Once it is sufficiently stable in this specification, <code>region-fragment</code> should be removed from the regions specification in favor of this.</p> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="continue" data-dfn-type="value" data-export id="valdef-continue-auto">auto</dfn> <dd> <p>If the box has more content than can fit, the excess content is handled according to the usual rules.</p> <dt><dfn class="dfn-paneled css" data-dfn-for="continue" data-dfn-type="value" data-export id="valdef-continue-discard">discard</dfn> <dd> The box must <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#establish-an-independent-formatting-context" id="ref-for-establish-an-independent-formatting-context">establish an independent formatting context</a> and becomes a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-container" id="ref-for-fragmentation-container⑥">fragmentation container</a> that captures <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#region-break" id="ref-for-region-break⑧">region breaks</a>, if it is not already. <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[CSS-BREAK-3]</a> Content after the first <span id="ref-for-region-break⑨">region break</span> is not rendered (see below). (If the box is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container②">multi-column container</a>, any <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#overflow-columns" id="ref-for-overflow-columns">overflow columns</a> are also not rendered.) <p class="note" role="note"><span class="marker">Note:</span> This <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#region-break" id="ref-for-region-break①⓪">region break</a> might be <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#forced-break" id="ref-for-forced-break">forced</a> (e.g. imposed by <a class="property css" data-link-type="property" href="#propdef-max-lines" id="ref-for-propdef-max-lines①⓪">max-lines</a> or by another mechanism, such as the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-before" id="ref-for-propdef-break-before">break-before</a>/<a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-break-3/#propdef-break-after" id="ref-for-propdef-break-after">break-after</a> properties) or <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#unforced-break" id="ref-for-unforced-break">unforced</a> (e.g. if the content would otherwise overflow this <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-container" id="ref-for-fragmentation-container⑦">fragmentation container</a> due to its size constraints). Breaks applying to other <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-context" id="ref-for-fragmentation-context①">fragmentation contexts</a> (such as pagination of this box itself) do not cause any content to be discarded.</p> </dl> <div class="example" id="example-722627b5"> <a class="self-link" href="#example-722627b5"></a> Given an article with one excessively long overflowing line, and four more lines than can fit in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-direction" id="ref-for-fragmentation-direction">fragmentation direction</a> as in the illustration bellow, different renderings are possible based on the combination of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow①⓪">overflow</a> and <a class="property css" data-link-type="property" href="#propdef-continue" id="ref-for-propdef-continue⑨">continue</a> property. <figure> <img alt="article with one excessively long line and four more that can fit in the block direction" height="109" src="images/continue-flow.png" width="100"> </figure> <table class="data"> <tbody> <tr> <th> <th><a class="css" data-link-type="propdesc" href="#propdef-continue" id="ref-for-propdef-continue①⓪">continue: discard</a> <th><a class="css" data-link-type="propdesc" href="#propdef-continue" id="ref-for-propdef-continue①①">continue: auto</a> <tr> <th><a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow①①">overflow: visible</a> <td style="vertical-align:top"><img alt="rendering with continue:discard and overflow:visible" height="90" src="images/continue-discard-visible.png" width="88"> <td><img alt="rendering with continue:auto and overflow:visible" height="116" src="images/continue-auto-visible.png" width="89"> <tr> <th><a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow①②">overflow: hidden</a> <td><img alt="rendering with continue:discard and overflow:hidden" height="90" src="images/continue-discard-hidden.png" width="78"> <td><img alt="rendering with continue:auto and overflow:hidden" height="90" src="images/continue-auto-hidden.png" width="78"> </table> </div> <p>Content that is “not rendered” due to <a class="css" data-link-type="propdesc" href="#propdef-continue" id="ref-for-propdef-continue①②">continue: discard</a> is discarded, similar to <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display①">display: none</a>:</p> <ul> <li data-md> <p>It is not rendered.</p> <li data-md> <p>It is also not made available for speech rendering.</p> <li data-md> <p>It does not allow user interaction.</p> <li data-md> <p class="issue" id="issue-0232c12f"><a class="self-link" href="#issue-0232c12f"></a> Make sure effects on OM are well defined <a href="https://github.com/w3c/csswg-drafts/issues/2970">[Issue #2970]</a></p> <li data-md> <p class="issue" id="issue-70383456"><a class="self-link" href="#issue-70383456"></a> What about <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#positioned-box" id="ref-for-positioned-box">positioned</a> elements whose static position is in the discarded content are not rendered? See also discussions in the <a href="https://lists.w3.org/Archives/Public/www-style/2018Jul/0030.html">Sydney F2F meeting</a>. <a href="https://github.com/w3c/csswg-drafts/issues/2971">[Issue #2971]</a></p> </ul> <p>However, since intrinsic sizes are calculated across <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-container" id="ref-for-fragmentation-container⑧">fragmentation containers</a>, this content <em>is</em> taken into account for the purpose of finding the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-inline-size" id="ref-for-min-content-inline-size">min-content</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content①">max-content</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-size" id="ref-for-inline-size">inline sizes</a> (see <a href="https://drafts.csswg.org/css-break-3/#varying-size-boxes"><cite>CSS Fragmentation 3</cite> § 5.1 Breaking into Varying-size Fragmentainers</a>). <span id="ref-for-min-content-inline-size①">Min-content</span> and <span id="ref-for-max-content②">max-content</span> <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-size" id="ref-for-block-size">block sizes</a> are calculated based on the content from the start of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmented-flow" id="ref-for-fragmented-flow">fragmented flow</a> to the first <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#forced-break" id="ref-for-forced-break①">forced break</a> if any, or to the end of the <span id="ref-for-fragmented-flow①">fragmented flow</span> if there is no forced break.</p> <p class="note" role="note"><span class="marker">Note:</span> In the case of <a href="https://www.w3.org/TR/css-break-3/#parallel-flows">parallel fragmentation flows</a>, content occurring after the <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-break" id="ref-for-fragmentation-break①">fragmentation break</a> in the box tree could still be rendered, if it is laid out above the position representing the end of this <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-container" id="ref-for-fragmentation-container⑨">fragmentation container</a>.</p> <p>Additionaliy, for compatibility (see <a href="#webkit-line-clamp">§ 5.1.1 Legacy compatibility</a>), when the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value">computed value</a> of the <a class="property css" data-link-type="property" href="#propdef-continue" id="ref-for-propdef-continue①③">continue</a> property is <a class="css" data-link-type="maybe" href="#valdef-continue-discard" id="ref-for-valdef-continue-discard③">discard</a> and the <span id="ref-for-computed-value①">computed value</span> of the <a class="property css" data-link-type="property" href="https://compat.spec.whatwg.org/#propdef--webkit-box-orient" id="ref-for-propdef--webkit-box-orient①">-webkit-box-orient</a> property is <span class="css">vertical</span>:</p> <ul> <li data-md> <p>If the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#specified-value" id="ref-for-specified-value①">specified value</a> of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display②">display</a> property is <a class="css" data-link-type="maybe" href="https://compat.spec.whatwg.org/#valdef-flex--webkit-box" id="ref-for-valdef-flex--webkit-box①">-webkit-box</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value②">computed value</a> becomes <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-flow-root" id="ref-for-valdef-display-flow-root">flow-root</a> and the box establishes a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#bfc" id="ref-for-bfc">BFC</a>.</p> <li data-md> <p>If the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#specified-value" id="ref-for-specified-value②">specified value</a> of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display③">display</a> property is <a class="css" data-link-type="maybe" href="https://compat.spec.whatwg.org/#valdef-flex--webkit-inline-box" id="ref-for-valdef-flex--webkit-inline-box①">-webkit-inline-box</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value③">computed value</a> becomes <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-inline-block" id="ref-for-valdef-display-inline-block">inline-block</a> and the box establishes a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#bfc" id="ref-for-bfc①">BFC</a>.</p> </ul> <p class="note" role="note"><span class="marker">Note:</span> This means that <a class="property css" data-link-type="property" href="#propdef-line-clamp" id="ref-for-propdef-line-clamp⑤">line-clamp</a> will work if both or neither of <a class="css" data-link-type="propdesc" href="https://compat.spec.whatwg.org/#propdef--webkit-box-orient" id="ref-for-propdef--webkit-box-orient②">-webkit-box-orient: vertical</a> and <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display④">display: -webkit-box</a> or <span class="css" id="ref-for-propdef-display⑤">display: -webkit-inline-box</span> are set, but not if <span class="css" id="ref-for-propdef-display⑥">display: -webkit-box</span> or <span class="css" id="ref-for-propdef-display⑦">display: -webkit-inline-box</span> is set while <span class="css" id="ref-for-propdef--webkit-box-orient③">-webkit-box-orient: vertical</span> isn’t, as the box would be a <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container">flex container</a> rather than a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-container" id="ref-for-block-container⑥">block container</a>, and thus the <a class="property css" data-link-type="property" href="#propdef-continue" id="ref-for-propdef-continue①④">continue</a> property would not apply.</p> <h2 class="nonum heading settled" id="sbg-ext"><span class="content"> Appendix A: Possible extensions for <span class="css">scrollbar-gutter</span></span><a class="self-link" href="#sbg-ext"></a></h2> <p><i>This section is non-normative.</i></p> <div class="non-normative"> <p class="issue" id="issue-c7c0d5ee"><a class="self-link" href="#issue-c7c0d5ee"></a> This section documents current attempts at extending the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter">scrollbar-gutter</a> 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.</p> <div class="example" id="example-c2e5ca46"> <a class="self-link" href="#example-c2e5ca46"></a> This example exercises all the additional values of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter①">scrollbar-gutter</a> property: <ul> <li data-md> <p><a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter②">scrollbar-gutter: always</a> on the scroll container</p> <li data-md> <p><a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter③">scrollbar-gutter: match-parent</a> on each row inside the scroll container</p> </ul> <figure> <figcaption>With classic scrollbars</figcaption> <img height="201" src="images/scrollbar-gutter-complex-classic.png" srcset="images/scrollbar-gutter-complex-classic.png 2x" width="318"> </figure> <figure> <figcaption>With overlay scrollbars</figcaption> <img height="201" src="images/scrollbar-gutter-complex-overlay.png" srcset="images/scrollbar-gutter-complex-overlay.png 2x" width="318"> </figure> </div> <table class="def propdef partial" data-link-for-hint="scrollbar-gutter"> <tbody> <tr> <th>Name: <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter④">scrollbar-gutter</a> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">New values:</a> <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> [ [ stable <span id="ref-for-comb-one①①">|</span> always ] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-all" id="ref-for-comb-all">&&</a> both-edges<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> ] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any③">||</a> match-parent <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> </table> <p>For <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#overlay-scrollbars" id="ref-for-overlay-scrollbars">overlay scrollbars</a>, the precise width of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollbar-gutter" id="ref-for-scrollbar-gutter">scrollbar gutter</a>, 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.</p> <p>The new values of this property have the following meaning:</p> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="scrollbar-gutter" data-dfn-type="value" data-export id="valdef-scrollbar-gutter-always">always</dfn> <dd> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollbar-gutter" id="ref-for-scrollbar-gutter①">scrollbar gutter</a> is always present when <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow①③">overflow</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-scroll" id="ref-for-valdef-overflow-scroll">scroll</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-hidden" id="ref-for-valdef-overflow-hidden">hidden</a>, or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-auto" id="ref-for-valdef-overflow-auto">auto</a>, regardless of the type of scrollbar or of whether the box is overflowing. <div class="example" id="example-f3a5b27a"> <a class="self-link" href="#example-f3a5b27a"></a> <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter⑤">scrollbar-gutter: always</a> 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. <figure> <figcaption>Checkboxes adjacent to a classic scrollbar</figcaption> <img alt=" A scrollable todo list with checkboxes on the right edge, adjacent to the scrollbar. This situation poses no particular problem." height="153" src="images/todo-classic.png" width="208"> </figure> <figure> <figcaption>Checkboxes and an overlay scrollbar</figcaption> <img alt=" A scrollable todo list with checkboxes on the right edge. When the overlay scrollbar is hidden, the situation poses no particular problem, but when it pops in, it covers the checkboxes, getting in the way of interacting with them." height="154" src="images/todo-overlay.png" width="418"> </figure> <p>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. <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter⑥">scrollbar-gutter: always</a> solves this problem, yielding an identical result in first case of classic scrollbars, but adding the desired gutter with overlay scrollbars:</p> <figure> <figcaption>Checkboxes and an overlay scrollbar and <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter⑦">scrollbar-gutter: always</a></figcaption> <img alt=" A scrollable todo list with checkboxes on the right edge, shifted left by a gutter. Whether the overlay scrollbar is hidden or visible, the checkboxes remain uncovered, and can be interacted with." height="153" src="images/todo-overlay-always.png" width="419"> </figure> </div> <div class="issue" id="issue-3f7416f3"> <a class="self-link" href="#issue-3f7416f3"></a> 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. <p>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.</p> <p>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.</p> <p>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.</p> <p>The syntax could be something like <code>scrollbar-avoid: none | [self | content] && both-edges?</code>.</p> <p>An interesting consideration is that this may alleviate the need for <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter⑧">scrollbar-gutter: match-parent</a>, as it seems that situations that would have been addressed by <span class="css" id="ref-for-propdef-scrollbar-gutter⑨">scrollbar-gutter: stable</span> or <span class="css" id="ref-for-propdef-scrollbar-gutter①⓪">scrollbar-gutter: always</span> on the parent and <span class="css" id="ref-for-propdef-scrollbar-gutter①①">scrollbar-gutter: match-parent</span> on the select children could instead be addressed by leaving the parent as <span class="css" id="ref-for-propdef-scrollbar-gutter①②">scrollbar-gutter: auto</span> and using <code>scrollbar-avoid: self</code> or <code>scrollbar-avoid: content</code> on the relevant children.</p> </div> <dt><dfn class="dfn-paneled css" data-dfn-for="scrollbar-gutter" data-dfn-type="value" data-export id="valdef-scrollbar-gutter-match-parent">match-parent</dfn> <dd> On a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-level" id="ref-for-block-level">block-level</a> box whose parent has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollbar-gutter" id="ref-for-scrollbar-gutter②">scrollbar gutter</a> (or gutters on both edges), this causes the box to have <span id="ref-for-scrollbar-gutter③">scrollbar gutter</span> 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. <figure> <img alt="The gutter of a ''scrollbar-gutter: match-parent'' box overlaps with that of its parent." height="272" src="images/match-parent.png" srcset="images/match-parent.png 2x" width="288"> </figure> <p>If the box with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter①③">scrollbar-gutter: match-parent</a> has a non-zero border or margin on the side where the gutter is expected, then the size of that box’s gutter is <code>parent.gutter - child.border - child.margin</code>, and the gutter+border+margin is what collapses with the parent’s gutter.</p> <p>If the box with <span class="css">scrollbar-gutter/ match-parent</span> is itself a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container">scroll container</a>, depending on the type of scrollbars, on its <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow①④">overflow</a> property, and on the other values of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter①④">scrollbar-gutter</a> 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 <a class="css" data-link-type="maybe" href="#valdef-scrollbar-gutter-match-parent" id="ref-for-valdef-scrollbar-gutter-match-parent">match-parent</a> value and does not collapse with the parent’s gutter.</p> <div class="example" id="example-08a122a1"> <a class="self-link" href="#example-08a122a1"></a> <figure> <figcaption>A scroller with an child whose background intrudes into the gutter, thanks to <a class="css" data-link-type="maybe" href="#valdef-scrollbar-gutter-match-parent" id="ref-for-valdef-scrollbar-gutter-match-parent①">match-parent</a></figcaption> <img height="288" src="images/match-parent-ex1.png" srcset="images/match-parent-ex1.png 4x" width="272"> </figure> <figure> <figcaption>A <a class="css" data-link-type="maybe" href="#valdef-scrollbar-gutter-match-parent" id="ref-for-valdef-scrollbar-gutter-match-parent②">match-parent</a> box inside a scroll container with classic scrollbars, <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow①⑤">overflow: auto</a>, and <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter①⑤">scrollbar-gutter: stable</a></figcaption> <img alt="The background of the match-parent element is visible in the gutter when the scrollbar isn't there." height="206" src="images/match-parent-classic.png" srcset="images/match-parent-classic.png 2x" width="428"> </figure> <figure> <figcaption>A scrollable box with <a class="css" data-link-type="maybe" href="#valdef-scrollbar-gutter-match-parent" id="ref-for-valdef-scrollbar-gutter-match-parent③">match-parent</a> inside another scroll container</figcaption> <img alt="The element has a double gutter, one for its own scrollbar, one to match its parent's." height="630" src="images/match-parent-nested.png" srcset="images/match-parent-nested.png 2x" width="630"> </figure> <figure> <figcaption>A scrollable box with <a class="css" data-link-type="maybe" href="#valdef-scrollbar-gutter-match-parent" id="ref-for-valdef-scrollbar-gutter-match-parent④">match-parent</a> inside another scroll container, with bidi</figcaption> <img alt="The element has a two gutters, one for its own scrollbar, one to match its parent's, on opposite sides." height="273" src="images/match-parent-bidi.png" srcset="images/match-parent-bidi.png 2x" width="630"> </figure> <figure> <figcaption>A scrollable box with <span class="css">scrollbar-gutter:match-parent stable</span> inside another scroll container, with bidi</figcaption> <img alt="The element has a two gutters, one for its own scrollbar (not shown, as it's not overflowing), one to match its parent's, on opposite sides." height="273" src="images/match-parent-stable.png" srcset="images/match-parent-stable.png 2x" width="630"> </figure> </div> </dl> <div class="note" role="note"> Note: The following table summarizes the interaction of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow①⑥">overflow</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter①⑥">scrollbar-gutter</a> for different types of scrollbars, showing in which case space is reserved for the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollbar-gutter" id="ref-for-scrollbar-gutter④">scrollbar gutter</a>. <table class="data complex"> <caption> Should space be reserved for the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollbar-gutter" id="ref-for-scrollbar-gutter⑤">scrollbar gutter</a>?</caption> <thead> <tr> <th rowspan="2"><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow①⑦">overflow</a> <th rowspan="2"><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter①⑦">scrollbar-gutter</a> <th colspan="2">Classic scrollbars <th rowspan="2">Overlay scrollbars <small>(whether overflowing or not)</small> <tr> <th>Overflowing <th>Not overflowing <tbody> <tr> <th rowspan="3"><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-scroll" id="ref-for-valdef-overflow-scroll①">scroll</a> <th><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-scrollbar-gutter-auto" id="ref-for-valdef-scrollbar-gutter-auto">auto</a> <td>yes <td>yes <td> <tr> <th><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-scrollbar-gutter-stable" id="ref-for-valdef-scrollbar-gutter-stable">stable</a> <td>yes <td>yes <td> <tr> <th><a class="css" data-link-type="maybe" href="#valdef-scrollbar-gutter-always" id="ref-for-valdef-scrollbar-gutter-always">always</a> <td>yes <td>yes <td>yes <tr> <th rowspan="3"><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-auto" id="ref-for-valdef-overflow-auto①">auto</a> <th><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-scrollbar-gutter-auto" id="ref-for-valdef-scrollbar-gutter-auto①">auto</a> <td>yes <td> <td> <tr> <th><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-scrollbar-gutter-stable" id="ref-for-valdef-scrollbar-gutter-stable①">stable</a> <td>yes <td>yes <td> <tr> <th><a class="css" data-link-type="maybe" href="#valdef-scrollbar-gutter-always" id="ref-for-valdef-scrollbar-gutter-always①">always</a> <td>yes <td>yes <td>yes <tr> <th rowspan="3"><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-hidden" id="ref-for-valdef-overflow-hidden①">hidden</a> <th><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-scrollbar-gutter-auto" id="ref-for-valdef-scrollbar-gutter-auto②">auto</a> <td> <td> <td> <tr> <th><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-scrollbar-gutter-stable" id="ref-for-valdef-scrollbar-gutter-stable②">stable</a> <td>yes <td>yes <td> <tr> <th><a class="css" data-link-type="maybe" href="#valdef-scrollbar-gutter-always" id="ref-for-valdef-scrollbar-gutter-always②">always</a> <td>yes <td>yes <td>yes <tr> <th rowspan="3"><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible" id="ref-for-valdef-overflow-visible②">visible</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-clip" id="ref-for-valdef-overflow-clip②">clip</a> <th><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-scrollbar-gutter-auto" id="ref-for-valdef-scrollbar-gutter-auto③">auto</a> <td> <td> <td> <tr> <th><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-scrollbar-gutter-stable" id="ref-for-valdef-scrollbar-gutter-stable③">stable</a> <td>if <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-overflow-4/#valdef-scrollbar-gutter-force" id="ref-for-valdef-scrollbar-gutter-force">force</a> <td>if <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-overflow-4/#valdef-scrollbar-gutter-force" id="ref-for-valdef-scrollbar-gutter-force①">force</a> <td> <tr> <th><a class="css" data-link-type="maybe" href="#valdef-scrollbar-gutter-always" id="ref-for-valdef-scrollbar-gutter-always③">always</a> <td>if <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-overflow-4/#valdef-scrollbar-gutter-force" id="ref-for-valdef-scrollbar-gutter-force②">force</a> <td>if <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-overflow-4/#valdef-scrollbar-gutter-force" id="ref-for-valdef-scrollbar-gutter-force③">force</a> <td>if <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-overflow-4/#valdef-scrollbar-gutter-force" id="ref-for-valdef-scrollbar-gutter-force④">force</a> </table> </div> </div> <h2 class="heading settled" id="privclass=nonum"><span class="content"> Appendix B: Privacy Considerations</span><a class="self-link" href="#privclass=nonum"></a></h2> <p>This specification introduces no new privacy considerations.</p> <h2 class="nonum heading settled" id="sec"><span class="content"> Appendix C: Security Considerations</span><a class="self-link" href="#sec"></a></h2> <p>This specification introduces no new security considerations.</p> <h2 class="no-num heading settled" id="changes"><span class="content"> Changes</span><a class="self-link" href="#changes"></a></h2> <h3 class="heading settled" id="recent-changes"><span class="content"> Recent Changes</span><a class="self-link" href="#recent-changes"></a></h3> <p>Significant changes since the <a href="https://www.w3.org/TR/2017/WD-css-overflow-4-20170613/">June 2017 Working Draft</a> include:</p> <ul> <li>Moved in the definition of <a class="property css" data-link-type="property" href="#propdef-text-overflow" id="ref-for-propdef-text-overflow⑤">text-overflow</a> from <a data-link-type="biblio" href="#biblio-css-ui-4" title="CSS Basic User Interface Module Level 4">[CSS-UI-4]</a>. <li>Moved the core definition of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter①⑧">scrollbar-gutter</a> to <a data-link-type="biblio" href="#biblio-css-overflow-3" title="CSS Overflow Module Level 3">[CSS-OVERFLOW-3]</a> (it will be copied back here once this specification is undiffed) and shift exploratory <span class="property" id="ref-for-propdef-scrollbar-gutter①⑨">scrollbar-gutter</span> extension ideas into an appendix. <li>Defined extension of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow①⑧">overflow</a> and <a class="property css" data-link-type="property" href="#propdef-overflow-clip-margin" id="ref-for-propdef-overflow-clip-margin④">overflow-clip-margin</a> to apply to <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element" id="ref-for-replaced-element⑦">replaced elements</a>. How exactly this works is still <a href="https://github.com/w3c/csswg-drafts/issues/7144">still under discussion</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/7144">Issue 7144</a>) <li>Defined <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#longhand" id="ref-for-longhand①">longhands</a> for <a class="property css" data-link-type="property" href="#propdef-overflow-clip-margin" id="ref-for-propdef-overflow-clip-margin⑤">overflow-clip-margin</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/7245">Issue 7245</a>) <li>Change the <a class="property css" data-link-type="property" href="#propdef-line-clamp" id="ref-for-propdef-line-clamp⑥">line-clamp</a> shorthand syntax to allow omitting the <a class="property css" data-link-type="property" href="#propdef-max-lines" id="ref-for-propdef-max-lines①①">max-lines</a> value (<a href="https://github.com/w3c/csswg-drafts/issues/9368">Issue 9368</a>) <li>Dropped the tentative <code>force</code> value for the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter②⓪">scrollbar-gutter</a> property. (<a href="https://github.com/w3c/csswg-drafts/issues/9815">Issue 9815</a>) <li>Establish an Independent Formatting Context when <a class="css" data-link-type="propdesc" href="#propdef-continue" id="ref-for-propdef-continue①⑤">continue: discard</a> is used. (<a href="https://github.com/w3c/csswg-drafts/issues/10323">Issue 10323</a>) <li>Blockify elements with <code>(-webkit-)line-clamp</code>, <code>display: -webkit-(inline-)box</code> and <code>-webkit-box-orient: vertical</code>. (<a href="https://github.com/w3c/csswg-drafts/issues/10324">Issue 10324</a>) </ul> <h3 class="heading settled" id="changes-l3"><span class="content"> Changes Since Level 3</span><a class="self-link" href="#changes-l3"></a></h3> <p class="issue" id="issue-d4908b1e"><a class="self-link" href="#issue-d4908b1e"></a> TBD</p> <h2 class="no-num heading settled" id="acknowledgments"><span class="content"> Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2> <p> 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 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community. </p> </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"><span class="content"> Conformance</span><a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#w3c-conventions"></a></h3> <p>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. </p> <p>All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a></p> <p>Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="example"</code>, like this: </p> <div class="example" id="w3c-example"> <a class="self-link" href="#w3c-example"></a> <p>This is an example of an informative example.</p> </div> <p>Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, like this: </p> <p class="note" role="note">Note, this is an informative note.</p> <p>Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code><strong class="advisement"></code>, like this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong></p> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <p>Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative.</p> <ul class="wpt-tests-list"></ul> <hr> </details> <h3 class="no-ref heading settled" id="w3c-conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#w3c-conformance-classes"></a></h3> <p>Conformance to this specification is defined for three conformance classes: </p> <dl> <dt>style sheet <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> <p>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. </p> <p>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.) </p> <p>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. </p> <h3 class="no-ref heading settled" id="w3c-partial"><span class="content"> Partial implementations</span><a class="self-link" href="#w3c-partial"></a></h3> <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents <strong>must not</strong> 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.</p> <h4 class="heading settled" id="w3c-conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#w3c-conform-future-proofing"></a></h4> <p>To avoid clashes with future stable CSS features, the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p> <h3 class="no-ref heading settled" id="w3c-testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#w3c-testing"></a></h3> <p>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. </p> <p>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. </p> <p>Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list.</p> <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#valdef-scrollbar-gutter-always">always</a><span>, in § Unnumbered section</span> <li> auto <ul> <li><a href="#valdef-block-ellipsis-auto">value for block-ellipsis</a><span>, in § 4.2</span> <li><a href="#valdef-continue-auto">value for continue</a><span>, in § 5.3</span> </ul> <li><a href="#valdef-line-clamp-block-ellipsis"><block-ellipsis></a><span>, in § 5.1</span> <li><a href="#propdef-block-ellipsis">block-ellipsis</a><span>, in § 4.2</span> <li><a href="#block-overflow-ellipsis">block overflow ellipsis</a><span>, in § 4.2</span> <li><a href="#overflow-clip">clip</a><span>, in § 4.1</span> <li><a href="#propdef-continue">continue</a><span>, in § 5.3</span> <li><a href="#valdef-continue-discard">discard</a><span>, in § 5.3</span> <li><a href="#overflow-ellipsis">ellipsis</a><span>, in § 4.1</span> <li><a href="#valdef-text-overflow-fade">fade</a><span>, in § 4.1</span> <li><a href="#funcdef-text-overflow-fade">fade()</a><span>, in § 4.1</span> <li><a href="#valdef-line-clamp-integer-1"><integer [1,∞]></a><span>, in § 5.1</span> <li><a href="#valdef-overflow-clip-margin-length-0"><length [0,∞]></a><span>, in § 3.2</span> <li><a href="#propdef-line-clamp">line-clamp</a><span>, in § 5.1</span> <li><a href="#valdef-scrollbar-gutter-match-parent">match-parent</a><span>, in § Unnumbered section</span> <li><a href="#propdef-max-lines">max-lines</a><span>, in § 5.2</span> <li> none <ul> <li><a href="#valdef-block-ellipsis-none">value for block-ellipsis</a><span>, in § 4.2</span> <li><a href="#valdef-line-clamp-none">value for line-clamp</a><span>, in § 5.1</span> <li><a href="#valdef-max-lines-none">value for max-lines</a><span>, in § 5.2</span> </ul> <li><a href="#overflow-clip-edge">overflow clip edge</a><span>, in § 3.2</span> <li><a href="#propdef-overflow-clip-margin">overflow-clip-margin</a><span>, in § 3.2</span> <li><a href="#propdef-overflow-clip-margin-block">overflow-clip-margin-block</a><span>, in § 3.2</span> <li><a href="#propdef-overflow-clip-margin-block-end">overflow-clip-margin-block-end</a><span>, in § 3.2</span> <li><a href="#propdef-overflow-clip-margin-block-start">overflow-clip-margin-block-start</a><span>, in § 3.2</span> <li><a href="#propdef-overflow-clip-margin-bottom">overflow-clip-margin-bottom</a><span>, in § 3.2</span> <li><a href="#propdef-overflow-clip-margin-inline">overflow-clip-margin-inline</a><span>, in § 3.2</span> <li><a href="#propdef-overflow-clip-margin-inline-end">overflow-clip-margin-inline-end</a><span>, in § 3.2</span> <li><a href="#propdef-overflow-clip-margin-inline-start">overflow-clip-margin-inline-start</a><span>, in § 3.2</span> <li><a href="#propdef-overflow-clip-margin-left">overflow-clip-margin-left</a><span>, in § 3.2</span> <li><a href="#propdef-overflow-clip-margin-right">overflow-clip-margin-right</a><span>, in § 3.2</span> <li><a href="#propdef-overflow-clip-margin-top">overflow-clip-margin-top</a><span>, in § 3.2</span> <li><a href="#valdef-block-ellipsis-string"><string></a><span>, in § 4.2</span> <li><a href="#propdef-text-overflow">text-overflow</a><span>, in § 4.1</span> <li><a href="#valdef-overflow-clip-margin-visual-box"><visual-box></a><span>, in § 3.2</span> <li><a href="#valdef-continue--webkit-discard">-webkit-discard</a><span>, in § 5.1.1</span> <li><a href="#propdef--webkit-line-clamp">-webkit-line-clamp</a><span>, in § 5.1.1</span> </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="fb8f8e00">strut</span> </ul> <li> <a data-link-type="biblio">[COMPAT]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="714ae626">-webkit-box</span> <li><span class="dfn-paneled" id="7bd44c3c">-webkit-box-orient</span> <li><span class="dfn-paneled" id="f60f5478">-webkit-inline-box</span> </ul> <li> <a data-link-type="biblio">[CSS-BACKGROUNDS-3]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="2c299d7c">outer box-shadow</span> </ul> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="43562076"><visual-box></span> <li><span class="dfn-paneled" id="b7e0bc03">border edge</span> <li><span class="dfn-paneled" id="cecbe9cd">margin</span> </ul> <li> <a data-link-type="biblio">[CSS-BREAK-3]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="0a52b385">break-after</span> <li><span class="dfn-paneled" id="c1654d36">break-before</span> <li><span class="dfn-paneled" id="9522389e">break-inside</span> <li><span class="dfn-paneled" id="2589df91">orphans</span> </ul> <li> <a data-link-type="biblio">[CSS-BREAK-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="b8c7a216">forced break</span> <li><span class="dfn-paneled" id="6458a3ef">fragmentation break</span> <li><span class="dfn-paneled" id="40060954">fragmentation container</span> <li><span class="dfn-paneled" id="a270c80d">fragmentation context</span> <li><span class="dfn-paneled" id="40471061">fragmentation direction</span> <li><span class="dfn-paneled" id="6234b6c0">fragmented flow</span> <li><span class="dfn-paneled" id="ba2b58c4">region break</span> <li><span class="dfn-paneled" id="c150f8fa">unforced break</span> <li><span class="dfn-paneled" id="b6730ce5">widows</span> </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="9cd25054">computed value</span> <li><span class="dfn-paneled" id="9e066e76">longhand</span> <li><span class="dfn-paneled" id="56177fad">shorthand</span> <li><span class="dfn-paneled" id="1cf918c1">specified value</span> <li><span class="dfn-paneled" id="64747b41">UA style sheet</span> <li><span class="dfn-paneled" id="a4eb3c57">used value</span> </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="9c6732e6">BFC</span> <li><span class="dfn-paneled" id="9f3d4f17">block container</span> <li><span class="dfn-paneled" id="ca960d4f">block formatting context</span> <li><span class="dfn-paneled" id="8379845e">block-level</span> <li><span class="dfn-paneled" id="e7f0dd6c">display</span> <li><span class="dfn-paneled" id="f41ab620">establish an independent formatting context</span> <li><span class="dfn-paneled" id="607244fc">flow-root</span> <li><span class="dfn-paneled" id="99cabd32">in-flow</span> <li><span class="dfn-paneled" id="8141cabb">independent formatting context</span> <li><span class="dfn-paneled" id="b8f126f1">inline formatting context</span> <li><span class="dfn-paneled" id="e33664cd">inline-block</span> <li><span class="dfn-paneled" id="94f59a47">replaced</span> <li><span class="dfn-paneled" id="a8485ff4">replaced element</span> </ul> <li> <a data-link-type="biblio">[CSS-FLEXBOX-1]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="24285d87">flex container</span> </ul> <li> <a data-link-type="biblio">[CSS-INLINE-3]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="e34548f4">line box</span> <li><span class="dfn-paneled" id="6f7798a0">root inline box</span> </ul> <li> <a data-link-type="biblio">[CSS-MASKING-1]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="6821b177">mask-image</span> </ul> <li> <a data-link-type="biblio">[CSS-MULTICOL-1]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="521eb6d4">multi-column container</span> <li><span class="dfn-paneled" id="d4e230ba">multicol container</span> <li><span class="dfn-paneled" id="e4a82d25">overflow columns</span> </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-3]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="8b3ca704">auto <small>(for overflow)</small></span> <li><span class="dfn-paneled" id="d2655fb4">auto <small>(for scrollbar-gutter)</small></span> <li><span class="dfn-paneled" id="33eda2d8">clip</span> <li><span class="dfn-paneled" id="e8907287">hidden</span> <li><span class="dfn-paneled" id="86928bde">overflow</span> <li><span class="dfn-paneled" id="24f4b323">overflow-x</span> <li><span class="dfn-paneled" id="9958418a">overflow-y</span> <li><span class="dfn-paneled" id="884d81d3">overlay scrollbars</span> <li><span class="dfn-paneled" id="e7ab0d6a">scroll</span> <li><span class="dfn-paneled" id="86923d07">scroll container</span> <li><span class="dfn-paneled" id="b2a71e73">scrollable overflow</span> <li><span class="dfn-paneled" id="14c62133">scrollbar gutter</span> <li><span class="dfn-paneled" id="3be9f354">scrollbar-gutter</span> <li><span class="dfn-paneled" id="a84f89a4">stable</span> <li><span class="dfn-paneled" id="2c3a36fb">visible</span> </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="0be4aca5">force</span> </ul> <li> <a data-link-type="biblio">[CSS-POSITION-3]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="bb0df938">positioned</span> </ul> <li> <a data-link-type="biblio">[CSS-PSEUDO-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="a1addf6c">::first-letter</span> <li><span class="dfn-paneled" id="75bfa627">::first-line</span> </ul> <li> <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="28d6b91b">max-content</span> <li><span class="dfn-paneled" id="26a40c98">max-content size</span> <li><span class="dfn-paneled" id="25ccffa4">min-content inline size</span> <li><span class="dfn-paneled" id="3f0db204">min-content size</span> </ul> <li> <a data-link-type="biblio">[CSS-SYNTAX-3]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="46d5c7e2">ignored</span> </ul> <li> <a data-link-type="biblio">[CSS-TEXT-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="5879b11d">content language</span> <li><span class="dfn-paneled" id="8996bcc8">overflow-wrap</span> <li><span class="dfn-paneled" id="0e74a72c">soft wrap opportunity</span> </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="f0809abc">&&</span> <li><span class="dfn-paneled" id="70c9f859"><integer></span> <li><span class="dfn-paneled" id="18222566"><length-percentage></span> <li><span class="dfn-paneled" id="fb030e6c"><length></span> <li><span class="dfn-paneled" id="15f5b381"><percentage></span> <li><span class="dfn-paneled" id="977d3003"><string></span> <li><span class="dfn-paneled" id="537cf076">?</span> <li><span class="dfn-paneled" id="358fd6ff">CSS-wide keywords</span> <li><span class="dfn-paneled" id="938ba280">{A,B}</span> <li><span class="dfn-paneled" id="6ec67710">|</span> <li><span class="dfn-paneled" id="8a82fda1">||</span> </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-3]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="5bc8bd12">direction</span> <li><span class="dfn-paneled" id="0b8a742a">left</span> <li><span class="dfn-paneled" id="982e17a3">unicode-bidi</span> </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="190183bb">block size</span> <li><span class="dfn-paneled" id="7bc19a34">end</span> <li><span class="dfn-paneled" id="37f0daea">inline size</span> <li><span class="dfn-paneled" id="2e45f1bb">line-left</span> <li><span class="dfn-paneled" id="fa646702">line-right</span> <li><span class="dfn-paneled" id="8067deca">start</span> <li><span class="dfn-paneled" id="a73617e0">writing mode</span> </ul> <li> <a data-link-type="biblio">[CSS22]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="ac54fbff">line-height</span> </ul> </ul> <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-compat">[COMPAT] <dd>Mike Taylor. <a href="https://compat.spec.whatwg.org/"><cite>Compatibility Standard</cite></a>. Living Standard. URL: <a href="https://compat.spec.whatwg.org/">https://compat.spec.whatwg.org/</a> <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] <dd>Elika Etemad; Brad Kemper. <a href="https://drafts.csswg.org/css-backgrounds/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-backgrounds/">https://drafts.csswg.org/css-backgrounds/</a> <dt id="biblio-css-box-4">[CSS-BOX-4] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-box-4/"><cite>CSS Box Model Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-box-4/">https://drafts.csswg.org/css-box-4/</a> <dt id="biblio-css-break-3">[CSS-BREAK-3] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-break/"><cite>CSS Fragmentation Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-break/">https://drafts.csswg.org/css-break/</a> <dt id="biblio-css-break-4">[CSS-BREAK-4] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-break-4/"><cite>CSS Fragmentation Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-break-4/">https://drafts.csswg.org/css-break-4/</a> <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-5/">https://drafts.csswg.org/css-cascade-5/</a> <dt id="biblio-css-display-4">[CSS-DISPLAY-4] <dd><a href="https://drafts.csswg.org/css-display-4/"><cite>CSS Display Module Level 4</cite></a>. Editor's Draft. URL: <a href="https://drafts.csswg.org/css-display-4/">https://drafts.csswg.org/css-display-4/</a> <dt id="biblio-css-inline-3">[CSS-INLINE-3] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-inline-3/"><cite>CSS Inline Layout Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-inline-3/">https://drafts.csswg.org/css-inline-3/</a> <dt id="biblio-css-masking-1">[CSS-MASKING-1] <dd>Dirk Schulze; Brian Birtles; Tab Atkins Jr.. <a href="https://drafts.fxtf.org/css-masking-1/"><cite>CSS Masking Module Level 1</cite></a>. URL: <a href="https://drafts.fxtf.org/css-masking-1/">https://drafts.fxtf.org/css-masking-1/</a> <dt id="biblio-css-multicol-1">[CSS-MULTICOL-1] <dd>Florian Rivoal; Rachel Andrew. <a href="https://drafts.csswg.org/css-multicol/"><cite>CSS Multi-column Layout Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-multicol/">https://drafts.csswg.org/css-multicol/</a> <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] <dd>Elika Etemad; Florian Rivoal. <a href="https://drafts.csswg.org/css-overflow-3/"><cite>CSS Overflow Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-overflow-3/">https://drafts.csswg.org/css-overflow-3/</a> <dt id="biblio-css-position-3">[CSS-POSITION-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-position-3/"><cite>CSS Positioned Layout Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-position-3/">https://drafts.csswg.org/css-position-3/</a> <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4] <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://drafts.csswg.org/css-pseudo-4/"><cite>CSS Pseudo-Elements Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-pseudo-4/">https://drafts.csswg.org/css-pseudo-4/</a> <dt id="biblio-css-sizing-3">[CSS-SIZING-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-sizing-3/"><cite>CSS Box Sizing Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-sizing-3/">https://drafts.csswg.org/css-sizing-3/</a> <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3] <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://drafts.csswg.org/css-syntax/"><cite>CSS Syntax Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-syntax/">https://drafts.csswg.org/css-syntax/</a> <dt id="biblio-css-text-3">[CSS-TEXT-3] <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://drafts.csswg.org/css-text-3/"><cite>CSS Text Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-3/">https://drafts.csswg.org/css-text-3/</a> <dt id="biblio-css-text-4">[CSS-TEXT-4] <dd>Elika Etemad; et al. <a href="https://drafts.csswg.org/css-text-4/"><cite>CSS Text Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-4/">https://drafts.csswg.org/css-text-4/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-3/">https://drafts.csswg.org/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a> <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-3/"><cite>CSS Writing Modes Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-3/">https://drafts.csswg.org/css-writing-modes-3/</a> <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-4/">https://drafts.csswg.org/css-writing-modes-4/</a> <dt id="biblio-css2">[CSS2] <dd>Bert Bos; et al. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-css22">[CSS22] <dd>Bert Bos. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> <dt id="biblio-uax29">[UAX29] <dd>Josh Hadley. <a href="https://www.unicode.org/reports/tr29/tr29-45.html"><cite>Unicode Text Segmentation</cite></a>. 28 August 2024. Unicode Standard Annex #29. URL: <a href="https://www.unicode.org/reports/tr29/tr29-45.html">https://www.unicode.org/reports/tr29/tr29-45.html</a> </dl> <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-flexbox-1">[CSS-FLEXBOX-1] <dd>Tab Atkins Jr.; et al. <a href="https://drafts.csswg.org/css-flexbox-1/"><cite>CSS Flexible Box Layout Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-flexbox-1/">https://drafts.csswg.org/css-flexbox-1/</a> <dt id="biblio-css-overflow-4">[CSS-OVERFLOW-4] <dd>David Baron; Florian Rivoal; Elika Etemad. <a href="https://drafts.csswg.org/css-overflow-4/"><cite>CSS Overflow Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-overflow-4/">https://drafts.csswg.org/css-overflow-4/</a> <dt id="biblio-css-page-3">[CSS-PAGE-3] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-page-3/"><cite>CSS Paged Media Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-page-3/">https://drafts.csswg.org/css-page-3/</a> <dt id="biblio-css-regions-1">[CSS-REGIONS-1] <dd>Rossen Atanassov; Alan Stearns. <a href="https://drafts.csswg.org/css-regions/"><cite>CSS Regions Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-regions/">https://drafts.csswg.org/css-regions/</a> <dt id="biblio-css-ui-4">[CSS-UI-4] <dd>Florian Rivoal. <a href="https://drafts.csswg.org/css-ui-4/"><cite>CSS Basic User Interface Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-ui-4/">https://drafts.csswg.org/css-ui-4/</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2> <div class="big-element-wrapper"> <table class="index"> <thead> <tr> <th scope="col">Name <th scope="col">Value <th scope="col">Initial <th scope="col">Applies to <th scope="col">Inh. <th scope="col">%ages <th scope="col">Animation type <th scope="col">Canonical order <th scope="col">Computed value <th scope="col">Logical property group <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef--webkit-line-clamp" id="ref-for-propdef--webkit-line-clamp③">-webkit-line-clamp</a> <td>none | <integer [1,∞]> <td>none <td>see individual properties <td>see individual properties <td>N/A <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-block-ellipsis" id="ref-for-propdef-block-ellipsis①①">block-ellipsis</a> <td>none | auto | <string> <td>none <td>block containers <td>yes <td>N/A <td>discrete <td>per grammar <td>specified value <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-continue" id="ref-for-propdef-continue①⑥">continue</a> <td>auto | discard <td>auto <td>block containers and multicol containers <td>no <td>N/A <td>discrete <td>per grammar <td>specified keyword <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-line-clamp" id="ref-for-propdef-line-clamp⑦">line-clamp</a> <td>none | <integer [1,∞]> || <'block-ellipsis'> <td>none <td>see individual properties <td>see individual properties <td>N/A <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-max-lines" id="ref-for-propdef-max-lines①②">max-lines</a> <td>none | <integer [1,∞]> <td>none <td>block containers which are also fragmentation containers that capture region breaks <td>no <td>N/A <td>by computed value type <td>per grammar <td>the keyword none or an integer <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-clip-margin" id="ref-for-propdef-overflow-clip-margin⑥">overflow-clip-margin</a> <td><visual-box> || <length [0,∞]> <td>0px <td>boxes to which overflow applies <td>no <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-clip-margin-block" id="ref-for-propdef-overflow-clip-margin-block">overflow-clip-margin-block</a> <td><visual-box> || <length [0,∞]> <td>0px <td>boxes to which overflow applies <td>no <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-clip-margin-block-end" id="ref-for-propdef-overflow-clip-margin-block-end">overflow-clip-margin-block-end</a> <td><visual-box> || <length [0,∞]> <td>0px <td>boxes to which overflow applies <td>no <td>see individual properties <td>per computed value if the <visual-box> values match; otherwise discrete <td>per grammar <td>the computed <length> and a <visual-box> keyword <td>overflow-clip-margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-clip-margin-block-start" id="ref-for-propdef-overflow-clip-margin-block-start">overflow-clip-margin-block-start</a> <td><visual-box> || <length [0,∞]> <td>0px <td>boxes to which overflow applies <td>no <td>see individual properties <td>per computed value if the <visual-box> values match; otherwise discrete <td>per grammar <td>the computed <length> and a <visual-box> keyword <td>overflow-clip-margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-clip-margin-bottom" id="ref-for-propdef-overflow-clip-margin-bottom">overflow-clip-margin-bottom</a> <td><visual-box> || <length [0,∞]> <td>0px <td>boxes to which overflow applies <td>no <td>see individual properties <td>per computed value if the <visual-box> values match; otherwise discrete <td>per grammar <td>the computed <length> and a <visual-box> keyword <td>overflow-clip-margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-clip-margin-inline" id="ref-for-propdef-overflow-clip-margin-inline">overflow-clip-margin-inline</a> <td><visual-box> || <length [0,∞]> <td>0px <td>boxes to which overflow applies <td>no <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-clip-margin-inline-end" id="ref-for-propdef-overflow-clip-margin-inline-end">overflow-clip-margin-inline-end</a> <td><visual-box> || <length [0,∞]> <td>0px <td>boxes to which overflow applies <td>no <td>see individual properties <td>per computed value if the <visual-box> values match; otherwise discrete <td>per grammar <td>the computed <length> and a <visual-box> keyword <td>overflow-clip-margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-clip-margin-inline-start" id="ref-for-propdef-overflow-clip-margin-inline-start">overflow-clip-margin-inline-start</a> <td><visual-box> || <length [0,∞]> <td>0px <td>boxes to which overflow applies <td>no <td>see individual properties <td>per computed value if the <visual-box> values match; otherwise discrete <td>per grammar <td>the computed <length> and a <visual-box> keyword <td>overflow-clip-margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-clip-margin-left" id="ref-for-propdef-overflow-clip-margin-left">overflow-clip-margin-left</a> <td><visual-box> || <length [0,∞]> <td>0px <td>boxes to which overflow applies <td>no <td>see individual properties <td>per computed value if the <visual-box> values match; otherwise discrete <td>per grammar <td>the computed <length> and a <visual-box> keyword <td>overflow-clip-margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-clip-margin-right" id="ref-for-propdef-overflow-clip-margin-right">overflow-clip-margin-right</a> <td><visual-box> || <length [0,∞]> <td>0px <td>boxes to which overflow applies <td>no <td>see individual properties <td>per computed value if the <visual-box> values match; otherwise discrete <td>per grammar <td>the computed <length> and a <visual-box> keyword <td>overflow-clip-margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-clip-margin-top" id="ref-for-propdef-overflow-clip-margin-top">overflow-clip-margin-top</a> <td><visual-box> || <length [0,∞]> <td>0px <td>boxes to which overflow applies <td>no <td>see individual properties <td>per computed value if the <visual-box> values match; otherwise discrete <td>per grammar <td>the computed <length> and a <visual-box> keyword <td>overflow-clip-margin <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-overflow" id="ref-for-propdef-text-overflow⑥">text-overflow</a> <td>[ clip | ellipsis | <string> | fade | <fade()> ]{1,2} <td>clip <td>block containers <td>no <td>refer to the width of the line box <td>by computed value type <td>per grammar <td>as specified, with lengths made absolute <td> </table> </div> <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> Copy <a href="https://drafts.csswg.org/css-overflow-3/#overflow-concepts">Level 3 content</a> when final. <a class="issue-return" href="#issue-50246bc5" title="Jump to section">↵</a></div> <div class="issue"> Copy <a href="https://drafts.csswg.org/css-overflow-3/#overflow-properties">Level 3 content</a> when final. <a class="issue-return" href="#issue-50246bc5①" title="Jump to section">↵</a></div> <div class="issue"> Application of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">overflow</a> to <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element">replaced elements</a> is still being worked out. <a href="https://github.com/w3c/csswg-drafts/issues/7144">[Issue #7144]</a> <a class="issue-return" href="#issue-1b75d3f8" title="Jump to section">↵</a></div> <div class="issue"> Application of <a class="property css" data-link-type="property" href="#propdef-overflow-clip-margin">overflow-clip-margin</a> to <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#replaced-element">replaced elements</a> is still being worked out. <a href="https://github.com/w3c/csswg-drafts/issues/7144">[Issue #7144]</a> <a class="issue-return" href="#issue-3d19a60f" title="Jump to section">↵</a></div> <div class="issue"> This section might need to be re-synced against <a data-link-type="biblio" href="#biblio-css-overflow-3" title="CSS Overflow Module Level 3">[CSS-OVERFLOW-3]</a>. <a class="issue-return" href="#issue-304ea7d9" title="Jump to section">↵</a></div> <div class="issue"> 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 <a class="css" data-link-type="propdesc" href="https://drafts.fxtf.org/css-masking-1/#propdef-mask-image">mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0))</a>, except applied to the relevant portion of the line only. <a class="issue-return" href="#issue-ebe65138" title="Jump to section">↵</a></div> <div class="issue"> 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? <a class="issue-return" href="#issue-2e22b1d9" title="Jump to section">↵</a></div> <div class="issue"> 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? <a class="issue-return" href="#issue-948cb1ee" title="Jump to section">↵</a></div> <div class="issue"> insert RTL example diagram here to illustrate note. <a class="issue-return" href="#issue-4b5212a2" title="Jump to section">↵</a></div> <div class="issue"> Should this apply to other types of fragmentation breaks (e.g. pages, columns)? <a class="issue-return" href="#issue-23a7778c" title="Jump to section">↵</a></div> <div class="issue"> For the time being, experimental implementations are encouraged to follow the full behavior defined by this shorthand and its longhands, but to only expose the shorthand to authors. This is in order to facilitate further tweaking, and in particular potential renaming, of the longhand properties and their values. <a class="issue-return" href="#issue-ebb2947d" title="Jump to section">↵</a></div> <div class="issue"> This property is meant to generalize and replace the <code>region-fragment</code> property from <a data-link-type="biblio" href="#biblio-css-regions-1" title="CSS Regions Module Level 1">[CSS-REGIONS-1]</a>. Once it is sufficiently stable in this specification, <code>region-fragment</code> should be removed from the regions specification in favor of this. <a class="issue-return" href="#issue-fe5938c8" title="Jump to section">↵</a></div> <div class="issue"> Make sure effects on OM are well defined <a href="https://github.com/w3c/csswg-drafts/issues/2970">[Issue #2970]</a> <a class="issue-return" href="#issue-0232c12f" title="Jump to section">↵</a></div> <div class="issue"> What about <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#positioned-box">positioned</a> elements whose static position is in the discarded content are not rendered? See also discussions in the <a href="https://lists.w3.org/Archives/Public/www-style/2018Jul/0030.html">Sydney F2F meeting</a>. <a href="https://github.com/w3c/csswg-drafts/issues/2971">[Issue #2971]</a> <a class="issue-return" href="#issue-70383456" title="Jump to section">↵</a></div> <div class="issue"> This section documents current attempts at extending the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter">scrollbar-gutter</a> 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. <a class="issue-return" href="#issue-c7c0d5ee" title="Jump to section">↵</a></div> <div class="issue"> 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. <p>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.</p> <p>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.</p> <p>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.</p> <p>The syntax could be something like <code>scrollbar-avoid: none | [self | content] && both-edges?</code>.</p> <p>An interesting consideration is that this may alleviate the need for <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter">scrollbar-gutter: match-parent</a>, as it seems that situations that would have been addressed by <span class="css">scrollbar-gutter: stable</span> or <span class="css">scrollbar-gutter: always</span> on the parent and <span class="css">scrollbar-gutter: match-parent</span> on the select children could instead be addressed by leaving the parent as <span class="css">scrollbar-gutter: auto</span> and using <code>scrollbar-avoid: self</code> or <code>scrollbar-avoid: content</code> on the relevant children.</p> <a class="issue-return" href="#issue-3f7416f3" title="Jump to section">↵</a> </div> <div class="issue"> TBD <a class="issue-return" href="#issue-d4908b1e" title="Jump to section">↵</a></div> </div> <details class="mdn-anno unpositioned" data-anno-for="propdef--webkit-line-clamp"> <summary><b class="all-engines-flag" title="This feature is in all current engines.">✔</b><span>MDN</span></summary> <div class="feature"> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp" title="The -webkit-line-clamp CSS property allows limiting of the contents of a block to the specified number of lines.">-webkit-line-clamp</a></p> <p class="all-engines-text">In all current engines.</p> <div class="support"> <span class="firefox yes"><span>Firefox</span><span>68+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span> <hr> <span class="opera no"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span> <hr> <span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>IE</span><span>None</span></span> <hr> <span class="firefox_android no"><span>Firefox for Android</span><span>?</span></span><span class="safari_ios no"><span>iOS Safari</span><span>?</span></span><span class="chrome_android no"><span>Chrome for Android</span><span>?</span></span><span class="webview_android yes"><span>Android WebView</span><span>37+</span></span><span class="samsunginternet_android no"><span>Samsung Internet</span><span>?</span></span><span class="opera_android no"><span>Opera Mobile</span><span>?</span></span> </div> </div> </details> <details class="caniuse-status unpositioned" data-anno-for="text-overflow" data-deco> <summary>CanIUse</summary> <p class="support"><b>Support:</b><span class="android yes"><span>Android Browser</span><span>2.1+</span></span><span class="baidu yes"><span>Baidu Browser</span><span>13.52+</span></span><span class="bb yes"><span>Blackberry Browser</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><span class="and_chr yes"><span>Chrome for Android</span><span>131+</span></span><span class="edge yes"><span>Edge</span><span>12+</span></span><span class="firefox yes"><span>Firefox</span><span>7+</span></span><span class="and_ff yes"><span>Firefox for Android</span><span>132+</span></span><span class="ie yes"><span>IE</span><span>6+</span></span><span class="ie_mob yes"><span>IE Mobile</span><span>10+</span></span><span class="kaios yes"><span>KaiOS Browser</span><span>2.5+</span></span><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="op_mini yes"><span>Opera Mini</span><span>All</span></span><span class="op_mob yes"><span>Opera Mobile</span><span>12.1+</span></span><span class="and_qq yes"><span>QQ Browser</span><span>14.9+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="ios_saf yes"><span>Safari on iOS</span><span>3.2+</span></span><span class="samsung yes"><span>Samsung Internet</span><span>4+</span></span><span class="and_uc yes"><span>UC Browser for Android</span><span>15.5+</span></span></p> <p class="caniuse">Source: <a href="https://caniuse.com/#feat=text-overflow">caniuse.com</a> as of 2024-12-02</p> </details> <script>/* Boilerplate: script-dom-helper */ "use strict"; function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } }</script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "0a52b385": {"dfnID":"0a52b385","dfnText":"break-after","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-break-after"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-break-3/#propdef-break-after"}, "0b8a742a": {"dfnID":"0b8a742a","dfnText":"left","external":true,"refSections":[{"refs":[{"id":"ref-for-physical-left"},{"id":"ref-for-physical-left\u2460"}],"title":"\nuser interaction with ellipsis"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#physical-left"}, "0be4aca5": {"dfnID":"0be4aca5","dfnText":"force","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-scrollbar-gutter-force"},{"id":"ref-for-valdef-scrollbar-gutter-force\u2460"},{"id":"ref-for-valdef-scrollbar-gutter-force\u2461"},{"id":"ref-for-valdef-scrollbar-gutter-force\u2462"},{"id":"ref-for-valdef-scrollbar-gutter-force\u2463"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://www.w3.org/TR/css-overflow-4/#valdef-scrollbar-gutter-force"}, "0e74a72c": {"dfnID":"0e74a72c","dfnText":"soft wrap opportunity","external":true,"refSections":[{"refs":[{"id":"ref-for-soft-wrap-opportunity"},{"id":"ref-for-soft-wrap-opportunity\u2460"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"}],"url":"https://drafts.csswg.org/css-text-4/#soft-wrap-opportunity"}, "14c62133": {"dfnID":"14c62133","dfnText":"scrollbar gutter","external":true,"refSections":[{"refs":[{"id":"ref-for-scrollbar-gutter"},{"id":"ref-for-scrollbar-gutter\u2460"},{"id":"ref-for-scrollbar-gutter\u2461"},{"id":"ref-for-scrollbar-gutter\u2462"},{"id":"ref-for-scrollbar-gutter\u2463"},{"id":"ref-for-scrollbar-gutter\u2464"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://drafts.csswg.org/css-overflow-3/#scrollbar-gutter"}, "15f5b381": {"dfnID":"15f5b381","dfnText":"<percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-percentage-value"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"}],"url":"https://drafts.csswg.org/css-values-4/#percentage-value"}, "18222566": {"dfnID":"18222566","dfnText":"<length-percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-length-percentage"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"}],"url":"https://drafts.csswg.org/css-values-4/#typedef-length-percentage"}, "190183bb": {"dfnID":"190183bb","dfnText":"block size","external":true,"refSections":[{"refs":[{"id":"ref-for-block-size"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#block-size"}, "1cf918c1": {"dfnID":"1cf918c1","dfnText":"specified value","external":true,"refSections":[{"refs":[{"id":"ref-for-specified-value"}],"title":"5.1.1. \nLegacy compatibility"},{"refs":[{"id":"ref-for-specified-value\u2460"},{"id":"ref-for-specified-value\u2461"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-cascade-5/#specified-value"}, "24285d87": {"dfnID":"24285d87","dfnText":"flex container","external":true,"refSections":[{"refs":[{"id":"ref-for-flex-container"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-flexbox-1/#flex-container"}, "24f4b323": {"dfnID":"24f4b323","dfnText":"overflow-x","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow-x"},{"id":"ref-for-propdef-overflow-x\u2460"}],"title":"3.1. \nManaging Overflow: the overflow-x, overflow-y, and overflow properties"}],"url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow-x"}, "2589df91": {"dfnID":"2589df91","dfnText":"orphans","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-orphans"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"}],"url":"https://drafts.csswg.org/css-break-3/#propdef-orphans"}, "25ccffa4": {"dfnID":"25ccffa4","dfnText":"min-content inline size","external":true,"refSections":[{"refs":[{"id":"ref-for-min-content-inline-size"},{"id":"ref-for-min-content-inline-size\u2460"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-sizing-3/#min-content-inline-size"}, "26a40c98": {"dfnID":"26a40c98","dfnText":"max-content size","external":true,"refSections":[{"refs":[{"id":"ref-for-max-content"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"},{"refs":[{"id":"ref-for-max-content\u2460"},{"id":"ref-for-max-content\u2461"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-sizing-3/#max-content"}, "28d6b91b": {"dfnID":"28d6b91b","dfnText":"max-content","external":true,"refSections":[{"refs":[{"id":"ref-for-max-content"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"},{"refs":[{"id":"ref-for-max-content\u2460"},{"id":"ref-for-max-content\u2461"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-sizing-3/#max-content"}, "2c299d7c": {"dfnID":"2c299d7c","dfnText":"outer box-shadow","external":true,"refSections":[{"refs":[{"id":"ref-for-box-shadow-outer-box-shadow"}],"title":"3.2. \nExpanding Clipping Bounds: the overflow-clip-margin-* properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#box-shadow-outer-box-shadow"}, "2c3a36fb": {"dfnID":"2c3a36fb","dfnText":"visible","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-overflow-visible"}],"title":"3.1. \nManaging Overflow: the overflow-x, overflow-y, and overflow properties"},{"refs":[{"id":"ref-for-valdef-overflow-visible\u2460"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"},{"refs":[{"id":"ref-for-valdef-overflow-visible\u2461"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible"}, "2e45f1bb": {"dfnID":"2e45f1bb","dfnText":"line-left","external":true,"refSections":[{"refs":[{"id":"ref-for-line-left"},{"id":"ref-for-line-left\u2460"},{"id":"ref-for-line-left\u2461"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#line-left"}, "33eda2d8": {"dfnID":"33eda2d8","dfnText":"clip","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-overflow-clip"},{"id":"ref-for-valdef-overflow-clip\u2460"}],"title":"3.1. \nManaging Overflow: the overflow-x, overflow-y, and overflow properties"},{"refs":[{"id":"ref-for-valdef-overflow-clip\u2461"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-clip"}, "358fd6ff": {"dfnID":"358fd6ff","dfnText":"CSS-wide keywords","external":true,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"1.1. \nValue Definitions"}],"url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "37f0daea": {"dfnID":"37f0daea","dfnText":"inline size","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-size"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#inline-size"}, "3be9f354": {"dfnID":"3be9f354","dfnText":"scrollbar-gutter","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-scrollbar-gutter"},{"id":"ref-for-propdef-scrollbar-gutter\u2460"},{"id":"ref-for-propdef-scrollbar-gutter\u2461"},{"id":"ref-for-propdef-scrollbar-gutter\u2462"},{"id":"ref-for-propdef-scrollbar-gutter\u2463"},{"id":"ref-for-propdef-scrollbar-gutter\u2464"},{"id":"ref-for-propdef-scrollbar-gutter\u2465"},{"id":"ref-for-propdef-scrollbar-gutter\u2466"},{"id":"ref-for-propdef-scrollbar-gutter\u2467"},{"id":"ref-for-propdef-scrollbar-gutter\u2468"},{"id":"ref-for-propdef-scrollbar-gutter\u2460\u24ea"},{"id":"ref-for-propdef-scrollbar-gutter\u2460\u2460"},{"id":"ref-for-propdef-scrollbar-gutter\u2460\u2461"},{"id":"ref-for-propdef-scrollbar-gutter\u2460\u2462"},{"id":"ref-for-propdef-scrollbar-gutter\u2460\u2463"},{"id":"ref-for-propdef-scrollbar-gutter\u2460\u2464"},{"id":"ref-for-propdef-scrollbar-gutter\u2460\u2465"},{"id":"ref-for-propdef-scrollbar-gutter\u2460\u2466"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"},{"refs":[{"id":"ref-for-propdef-scrollbar-gutter\u2460\u2467"},{"id":"ref-for-propdef-scrollbar-gutter\u2460\u2468"},{"id":"ref-for-propdef-scrollbar-gutter\u2461\u24ea"}],"title":"\nRecent Changes"}],"url":"https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter"}, "3f0db204": {"dfnID":"3f0db204","dfnText":"min-content size","external":true,"refSections":[{"refs":[{"id":"ref-for-min-content"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"}],"url":"https://drafts.csswg.org/css-sizing-3/#min-content"}, "40060954": {"dfnID":"40060954","dfnText":"fragmentation container","external":true,"refSections":[{"refs":[{"id":"ref-for-fragmentation-container"},{"id":"ref-for-fragmentation-container\u2460"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"},{"refs":[{"id":"ref-for-fragmentation-container\u2461"},{"id":"ref-for-fragmentation-container\u2462"},{"id":"ref-for-fragmentation-container\u2463"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"},{"refs":[{"id":"ref-for-fragmentation-container\u2464"},{"id":"ref-for-fragmentation-container\u2465"},{"id":"ref-for-fragmentation-container\u2466"},{"id":"ref-for-fragmentation-container\u2467"},{"id":"ref-for-fragmentation-container\u2468"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-break-4/#fragmentation-container"}, "40471061": {"dfnID":"40471061","dfnText":"fragmentation direction","external":true,"refSections":[{"refs":[{"id":"ref-for-fragmentation-direction"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-break-4/#fragmentation-direction"}, "43562076": {"dfnID":"43562076","dfnText":"<visual-box>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-visual-box"},{"id":"ref-for-typedef-visual-box\u2460"},{"id":"ref-for-typedef-visual-box\u2461"},{"id":"ref-for-typedef-visual-box\u2462"},{"id":"ref-for-typedef-visual-box\u2463"}],"title":"3.2. \nExpanding Clipping Bounds: the overflow-clip-margin-* properties"}],"url":"https://drafts.csswg.org/css-box-4/#typedef-visual-box"}, "46d5c7e2": {"dfnID":"46d5c7e2","dfnText":"ignored","external":true,"refSections":[{"refs":[{"id":"ref-for-css-ignored"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"}],"url":"https://drafts.csswg.org/css-syntax-3/#css-ignored"}, "521eb6d4": {"dfnID":"521eb6d4","dfnText":"multi-column container","external":true,"refSections":[{"refs":[{"id":"ref-for-multi-column-container"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"},{"refs":[{"id":"ref-for-multi-column-container\u2460"},{"id":"ref-for-multi-column-container\u2461"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-multicol-1/#multi-column-container"}, "537cf076": {"dfnID":"537cf076","dfnText":"?","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-opt"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "56177fad": {"dfnID":"56177fad","dfnText":"shorthand","external":true,"refSections":[{"refs":[{"id":"ref-for-shorthand-property"}],"title":"3.1. \nManaging Overflow: the overflow-x, overflow-y, and overflow properties"},{"refs":[{"id":"ref-for-shorthand-property\u2460"},{"id":"ref-for-shorthand-property\u2461"}],"title":"3.2. \nExpanding Clipping Bounds: the overflow-clip-margin-* properties"},{"refs":[{"id":"ref-for-shorthand-property\u2462"}],"title":"5.1. \nLimiting Visible Lines: the line-clamp shorthand property"}],"url":"https://drafts.csswg.org/css-cascade-5/#shorthand-property"}, "5879b11d": {"dfnID":"5879b11d","dfnText":"content language","external":true,"refSections":[{"refs":[{"id":"ref-for-content-language"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"}],"url":"https://drafts.csswg.org/css-text-4/#content-language"}, "5bc8bd12": {"dfnID":"5bc8bd12","dfnText":"direction","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-direction"}],"title":"\nuser interaction with ellipsis"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "607244fc": {"dfnID":"607244fc","dfnText":"flow-root","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-flow-root"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-flow-root"}, "6234b6c0": {"dfnID":"6234b6c0","dfnText":"fragmented flow","external":true,"refSections":[{"refs":[{"id":"ref-for-fragmented-flow"},{"id":"ref-for-fragmented-flow\u2460"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-break-4/#fragmented-flow"}, "6458a3ef": {"dfnID":"6458a3ef","dfnText":"fragmentation break","external":true,"refSections":[{"refs":[{"id":"ref-for-fragmentation-break"},{"id":"ref-for-fragmentation-break\u2460"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-break-4/#fragmentation-break"}, "64747b41": {"dfnID":"64747b41","dfnText":"UA style sheet","external":true,"refSections":[{"refs":[{"id":"ref-for-cascade-origin-ua"}],"title":"3.1. \nManaging Overflow: the overflow-x, overflow-y, and overflow properties"}],"url":"https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua"}, "6821b177": {"dfnID":"6821b177","dfnText":"mask-image","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-image"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"}],"url":"https://drafts.fxtf.org/css-masking-1/#propdef-mask-image"}, "6ec67710": {"dfnID":"6ec67710","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"},{"id":"ref-for-comb-one\u2460"},{"id":"ref-for-comb-one\u2461"},{"id":"ref-for-comb-one\u2462"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"},{"refs":[{"id":"ref-for-comb-one\u2463"},{"id":"ref-for-comb-one\u2464"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"},{"refs":[{"id":"ref-for-comb-one\u2465"}],"title":"5.1. \nLimiting Visible Lines: the line-clamp shorthand property"},{"refs":[{"id":"ref-for-comb-one\u2466"}],"title":"5.1.1. \nLegacy compatibility"},{"refs":[{"id":"ref-for-comb-one\u2467"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"},{"refs":[{"id":"ref-for-comb-one\u2468"}],"title":"5.3. \nFragmentation of Overflow: the continue property"},{"refs":[{"id":"ref-for-comb-one\u2460\u24ea"},{"id":"ref-for-comb-one\u2460\u2460"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "6f7798a0": {"dfnID":"6f7798a0","dfnText":"root inline box","external":true,"refSections":[{"refs":[{"id":"ref-for-root-inline-box"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"}],"url":"https://drafts.csswg.org/css-inline-3/#root-inline-box"}, "70c9f859": {"dfnID":"70c9f859","dfnText":"<integer>","external":true,"refSections":[{"refs":[{"id":"ref-for-integer-value"},{"id":"ref-for-integer-value\u2460"},{"id":"ref-for-integer-value\u2461"}],"title":"5.1. \nLimiting Visible Lines: the line-clamp shorthand property"},{"refs":[{"id":"ref-for-integer-value\u2462"},{"id":"ref-for-integer-value\u2463"}],"title":"5.1.1. \nLegacy compatibility"},{"refs":[{"id":"ref-for-integer-value\u2464"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"}],"url":"https://drafts.csswg.org/css-values-4/#integer-value"}, "714ae626": {"dfnID":"714ae626","dfnText":"-webkit-box","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-flex--webkit-box"}],"title":"5.1.1. \nLegacy compatibility"},{"refs":[{"id":"ref-for-valdef-flex--webkit-box\u2460"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://compat.spec.whatwg.org/#valdef-flex--webkit-box"}, "75bfa627": {"dfnID":"75bfa627","dfnText":"::first-line","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-first-line"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"}],"url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line"}, "7bc19a34": {"dfnID":"7bc19a34","dfnText":"end","external":true,"refSections":[{"refs":[{"id":"ref-for-css-end"},{"id":"ref-for-css-end\u2460"},{"id":"ref-for-css-end\u2461"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"},{"refs":[{"id":"ref-for-css-end\u2462"}],"title":"\nellipsis interaction with scrolling interfaces"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#css-end"}, "7bd44c3c": {"dfnID":"7bd44c3c","dfnText":"-webkit-box-orient","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef--webkit-box-orient"}],"title":"5.1.1. \nLegacy compatibility"},{"refs":[{"id":"ref-for-propdef--webkit-box-orient\u2460"},{"id":"ref-for-propdef--webkit-box-orient\u2461"},{"id":"ref-for-propdef--webkit-box-orient\u2462"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://compat.spec.whatwg.org/#propdef--webkit-box-orient"}, "8067deca": {"dfnID":"8067deca","dfnText":"start","external":true,"refSections":[{"refs":[{"id":"ref-for-css-start"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"},{"refs":[{"id":"ref-for-css-start\u2460"}],"title":"\nellipsis interaction with scrolling interfaces"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#css-start"}, "8141cabb": {"dfnID":"8141cabb","dfnText":"independent formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-independent-formatting-context"},{"id":"ref-for-independent-formatting-context\u2460"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"}],"url":"https://drafts.csswg.org/css-display-4/#independent-formatting-context"}, "8379845e": {"dfnID":"8379845e","dfnText":"block-level","external":true,"refSections":[{"refs":[{"id":"ref-for-block-level"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://drafts.csswg.org/css-display-4/#block-level"}, "86923d07": {"dfnID":"86923d07","dfnText":"scroll container","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-container"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://drafts.csswg.org/css-overflow-3/#scroll-container"}, "86928bde": {"dfnID":"86928bde","dfnText":"overflow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow"},{"id":"ref-for-propdef-overflow\u2460"},{"id":"ref-for-propdef-overflow\u2461"},{"id":"ref-for-propdef-overflow\u2462"}],"title":"3.1. \nManaging Overflow: the overflow-x, overflow-y, and overflow properties"},{"refs":[{"id":"ref-for-propdef-overflow\u2463"},{"id":"ref-for-propdef-overflow\u2464"},{"id":"ref-for-propdef-overflow\u2465"},{"id":"ref-for-propdef-overflow\u2466"},{"id":"ref-for-propdef-overflow\u2467"}],"title":"3.2. \nExpanding Clipping Bounds: the overflow-clip-margin-* properties"},{"refs":[{"id":"ref-for-propdef-overflow\u2468"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"},{"refs":[{"id":"ref-for-propdef-overflow\u2460\u24ea"},{"id":"ref-for-propdef-overflow\u2460\u2460"},{"id":"ref-for-propdef-overflow\u2460\u2461"}],"title":"5.3. \nFragmentation of Overflow: the continue property"},{"refs":[{"id":"ref-for-propdef-overflow\u2460\u2462"},{"id":"ref-for-propdef-overflow\u2460\u2463"},{"id":"ref-for-propdef-overflow\u2460\u2464"},{"id":"ref-for-propdef-overflow\u2460\u2465"},{"id":"ref-for-propdef-overflow\u2460\u2466"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"},{"refs":[{"id":"ref-for-propdef-overflow\u2460\u2467"}],"title":"\nRecent Changes"}],"url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow"}, "884d81d3": {"dfnID":"884d81d3","dfnText":"overlay scrollbars","external":true,"refSections":[{"refs":[{"id":"ref-for-overlay-scrollbars"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://drafts.csswg.org/css-overflow-3/#overlay-scrollbars"}, "8996bcc8": {"dfnID":"8996bcc8","dfnText":"overflow-wrap","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow-wrap"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"}],"url":"https://drafts.csswg.org/css-text-4/#propdef-overflow-wrap"}, "8a82fda1": {"dfnID":"8a82fda1","dfnText":"||","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-any"},{"id":"ref-for-comb-any\u2460"}],"title":"3.2. \nExpanding Clipping Bounds: the overflow-clip-margin-* properties"},{"refs":[{"id":"ref-for-comb-any\u2461"}],"title":"5.1. \nLimiting Visible Lines: the line-clamp shorthand property"},{"refs":[{"id":"ref-for-comb-any\u2462"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://drafts.csswg.org/css-values-4/#comb-any"}, "8b3ca704": {"dfnID":"8b3ca704","dfnText":"auto (for overflow)","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-overflow-auto"},{"id":"ref-for-valdef-overflow-auto\u2460"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-auto"}, "938ba280": {"dfnID":"938ba280","dfnText":"{A,B}","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-num-range"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"}],"url":"https://drafts.csswg.org/css-values-4/#mult-num-range"}, "94f59a47": {"dfnID":"94f59a47","dfnText":"replaced","external":true,"refSections":[{"refs":[{"id":"ref-for-replaced-element"},{"id":"ref-for-replaced-element\u2460"},{"id":"ref-for-replaced-element\u2461"},{"id":"ref-for-replaced-element\u2462"}],"title":"3.1. \nManaging Overflow: the overflow-x, overflow-y, and overflow properties"},{"refs":[{"id":"ref-for-replaced-element\u2463"},{"id":"ref-for-replaced-element\u2464"},{"id":"ref-for-replaced-element\u2465"}],"title":"3.2. \nExpanding Clipping Bounds: the overflow-clip-margin-* properties"},{"refs":[{"id":"ref-for-replaced-element\u2466"}],"title":"\nRecent Changes"}],"url":"https://drafts.csswg.org/css-display-4/#replaced-element"}, "9522389e": {"dfnID":"9522389e","dfnText":"break-inside","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-break-inside"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"}],"url":"https://drafts.csswg.org/css-break-3/#propdef-break-inside"}, "977d3003": {"dfnID":"977d3003","dfnText":"<string>","external":true,"refSections":[{"refs":[{"id":"ref-for-string-value"},{"id":"ref-for-string-value\u2460"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"},{"refs":[{"id":"ref-for-string-value\u2461"},{"id":"ref-for-string-value\u2462"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"}],"url":"https://drafts.csswg.org/css-values-4/#string-value"}, "982e17a3": {"dfnID":"982e17a3","dfnText":"unicode-bidi","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-unicode-bidi"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi"}, "9958418a": {"dfnID":"9958418a","dfnText":"overflow-y","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow-y"},{"id":"ref-for-propdef-overflow-y\u2460"}],"title":"3.1. \nManaging Overflow: the overflow-x, overflow-y, and overflow properties"}],"url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow-y"}, "99cabd32": {"dfnID":"99cabd32","dfnText":"in-flow","external":true,"refSections":[{"refs":[{"id":"ref-for-in-flow"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"}],"url":"https://drafts.csswg.org/css-display-4/#in-flow"}, "9c6732e6": {"dfnID":"9c6732e6","dfnText":"BFC","external":true,"refSections":[{"refs":[{"id":"ref-for-bfc"},{"id":"ref-for-bfc\u2460"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-display-4/#bfc"}, "9cd25054": {"dfnID":"9cd25054","dfnText":"computed value","external":true,"refSections":[{"refs":[{"id":"ref-for-computed-value"},{"id":"ref-for-computed-value\u2460"},{"id":"ref-for-computed-value\u2461"},{"id":"ref-for-computed-value\u2462"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "9e066e76": {"dfnID":"9e066e76","dfnText":"longhand","external":true,"refSections":[{"refs":[{"id":"ref-for-longhand"}],"title":"3.2. \nExpanding Clipping Bounds: the overflow-clip-margin-* properties"},{"refs":[{"id":"ref-for-longhand\u2460"}],"title":"\nRecent Changes"}],"url":"https://drafts.csswg.org/css-cascade-5/#longhand"}, "9f3d4f17": {"dfnID":"9f3d4f17","dfnText":"block container","external":true,"refSections":[{"refs":[{"id":"ref-for-block-container"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"},{"refs":[{"id":"ref-for-block-container\u2460"},{"id":"ref-for-block-container\u2461"},{"id":"ref-for-block-container\u2462"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"},{"refs":[{"id":"ref-for-block-container\u2463"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"},{"refs":[{"id":"ref-for-block-container\u2464"},{"id":"ref-for-block-container\u2465"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-display-4/#block-container"}, "a1addf6c": {"dfnID":"a1addf6c","dfnText":"::first-letter","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-first-letter"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"}],"url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter"}, "a270c80d": {"dfnID":"a270c80d","dfnText":"fragmentation context","external":true,"refSections":[{"refs":[{"id":"ref-for-fragmentation-context"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"},{"refs":[{"id":"ref-for-fragmentation-context\u2460"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-break-4/#fragmentation-context"}, "a4eb3c57": {"dfnID":"a4eb3c57","dfnText":"used value","external":true,"refSections":[{"refs":[{"id":"ref-for-used-value"}],"title":"3.1. \nManaging Overflow: the overflow-x, overflow-y, and overflow properties"}],"url":"https://drafts.csswg.org/css-cascade-5/#used-value"}, "a73617e0": {"dfnID":"a73617e0","dfnText":"writing mode","external":true,"refSections":[{"refs":[{"id":"ref-for-writing-mode"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#writing-mode"}, "a8485ff4": {"dfnID":"a8485ff4","dfnText":"replaced element","external":true,"refSections":[{"refs":[{"id":"ref-for-replaced-element"},{"id":"ref-for-replaced-element\u2460"},{"id":"ref-for-replaced-element\u2461"},{"id":"ref-for-replaced-element\u2462"}],"title":"3.1. \nManaging Overflow: the overflow-x, overflow-y, and overflow properties"},{"refs":[{"id":"ref-for-replaced-element\u2463"},{"id":"ref-for-replaced-element\u2464"},{"id":"ref-for-replaced-element\u2465"}],"title":"3.2. \nExpanding Clipping Bounds: the overflow-clip-margin-* properties"},{"refs":[{"id":"ref-for-replaced-element\u2466"}],"title":"\nRecent Changes"}],"url":"https://drafts.csswg.org/css-display-4/#replaced-element"}, "a84f89a4": {"dfnID":"a84f89a4","dfnText":"stable","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-scrollbar-gutter-stable"},{"id":"ref-for-valdef-scrollbar-gutter-stable\u2460"},{"id":"ref-for-valdef-scrollbar-gutter-stable\u2461"},{"id":"ref-for-valdef-scrollbar-gutter-stable\u2462"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://drafts.csswg.org/css-overflow-3/#valdef-scrollbar-gutter-stable"}, "ac54fbff": {"dfnID":"ac54fbff","dfnText":"line-height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-line-height"},{"id":"ref-for-propdef-line-height\u2460"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"}],"url":"https://drafts.csswg.org/css2/#propdef-line-height"}, "b2a71e73": {"dfnID":"b2a71e73","dfnText":"scrollable overflow","external":true,"refSections":[{"refs":[{"id":"ref-for-scrollable-overflow"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"}],"url":"https://drafts.csswg.org/css-overflow-3/#scrollable-overflow"}, "b6730ce5": {"dfnID":"b6730ce5","dfnText":"widows","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-widows"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"}],"url":"https://drafts.csswg.org/css-break-4/#propdef-widows"}, "b7e0bc03": {"dfnID":"b7e0bc03","dfnText":"border edge","external":true,"refSections":[{"refs":[{"id":"ref-for-border-edge"},{"id":"ref-for-border-edge\u2460"}],"title":"3.2. \nExpanding Clipping Bounds: the overflow-clip-margin-* properties"}],"url":"https://drafts.csswg.org/css-box-4/#border-edge"}, "b8c7a216": {"dfnID":"b8c7a216","dfnText":"forced break","external":true,"refSections":[{"refs":[{"id":"ref-for-forced-break"},{"id":"ref-for-forced-break\u2460"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-break-4/#forced-break"}, "b8f126f1": {"dfnID":"b8f126f1","dfnText":"inline formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-formatting-context"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"}],"url":"https://drafts.csswg.org/css-display-4/#inline-formatting-context"}, "ba2b58c4": {"dfnID":"ba2b58c4","dfnText":"region break","external":true,"refSections":[{"refs":[{"id":"ref-for-region-break"},{"id":"ref-for-region-break\u2460"},{"id":"ref-for-region-break\u2461"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"},{"refs":[{"id":"ref-for-region-break\u2462"},{"id":"ref-for-region-break\u2463"},{"id":"ref-for-region-break\u2464"},{"id":"ref-for-region-break\u2465"},{"id":"ref-for-region-break\u2466"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"},{"refs":[{"id":"ref-for-region-break\u2467"},{"id":"ref-for-region-break\u2468"},{"id":"ref-for-region-break\u2460\u24ea"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-break-4/#region-break"}, "bb0df938": {"dfnID":"bb0df938","dfnText":"positioned","external":true,"refSections":[{"refs":[{"id":"ref-for-positioned-box"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-position-3/#positioned-box"}, "block-overflow-ellipsis": {"dfnID":"block-overflow-ellipsis","dfnText":"block overflow ellipsis","external":false,"refSections":[{"refs":[{"id":"ref-for-block-overflow-ellipsis"},{"id":"ref-for-block-overflow-ellipsis\u2460"},{"id":"ref-for-block-overflow-ellipsis\u2461"},{"id":"ref-for-block-overflow-ellipsis\u2462"},{"id":"ref-for-block-overflow-ellipsis\u2463"},{"id":"ref-for-block-overflow-ellipsis\u2464"},{"id":"ref-for-block-overflow-ellipsis\u2465"},{"id":"ref-for-block-overflow-ellipsis\u2466"},{"id":"ref-for-block-overflow-ellipsis\u2467"},{"id":"ref-for-block-overflow-ellipsis\u2468"},{"id":"ref-for-block-overflow-ellipsis\u2460\u24ea"},{"id":"ref-for-block-overflow-ellipsis\u2460\u2460"},{"id":"ref-for-block-overflow-ellipsis\u2460\u2461"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"}],"url":"#block-overflow-ellipsis"}, "c150f8fa": {"dfnID":"c150f8fa","dfnText":"unforced break","external":true,"refSections":[{"refs":[{"id":"ref-for-unforced-break"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-break-4/#unforced-break"}, "c1654d36": {"dfnID":"c1654d36","dfnText":"break-before","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-break-before"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-break-3/#propdef-break-before"}, "ca960d4f": {"dfnID":"ca960d4f","dfnText":"block formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-block-formatting-context"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"}],"url":"https://drafts.csswg.org/css-display-4/#block-formatting-context"}, "cecbe9cd": {"dfnID":"cecbe9cd","dfnText":"margin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin"}],"title":"3.2. \nExpanding Clipping Bounds: the overflow-clip-margin-* properties"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin"}, "d2655fb4": {"dfnID":"d2655fb4","dfnText":"auto (for scrollbar-gutter)","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-scrollbar-gutter-auto"},{"id":"ref-for-valdef-scrollbar-gutter-auto\u2460"},{"id":"ref-for-valdef-scrollbar-gutter-auto\u2461"},{"id":"ref-for-valdef-scrollbar-gutter-auto\u2462"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://drafts.csswg.org/css-overflow-3/#valdef-scrollbar-gutter-auto"}, "d4e230ba": {"dfnID":"d4e230ba","dfnText":"multicol container","external":true,"refSections":[{"refs":[{"id":"ref-for-multi-column-container"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"},{"refs":[{"id":"ref-for-multi-column-container\u2460"},{"id":"ref-for-multi-column-container\u2461"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-multicol-1/#multi-column-container"}, "e33664cd": {"dfnID":"e33664cd","dfnText":"inline-block","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-inline-block"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-inline-block"}, "e34548f4": {"dfnID":"e34548f4","dfnText":"line box","external":true,"refSections":[{"refs":[{"id":"ref-for-line-box"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"}],"url":"https://drafts.csswg.org/css-inline-3/#line-box"}, "e4a82d25": {"dfnID":"e4a82d25","dfnText":"overflow columns","external":true,"refSections":[{"refs":[{"id":"ref-for-overflow-columns"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-multicol-1/#overflow-columns"}, "e7ab0d6a": {"dfnID":"e7ab0d6a","dfnText":"scroll","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-overflow-scroll"},{"id":"ref-for-valdef-overflow-scroll\u2460"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-scroll"}, "e7f0dd6c": {"dfnID":"e7f0dd6c","dfnText":"display","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-display"}],"title":"5.1.1. \nLegacy compatibility"},{"refs":[{"id":"ref-for-propdef-display\u2460"},{"id":"ref-for-propdef-display\u2461"},{"id":"ref-for-propdef-display\u2462"},{"id":"ref-for-propdef-display\u2463"},{"id":"ref-for-propdef-display\u2464"},{"id":"ref-for-propdef-display\u2465"},{"id":"ref-for-propdef-display\u2466"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-display"}, "e8907287": {"dfnID":"e8907287","dfnText":"hidden","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-overflow-hidden"},{"id":"ref-for-valdef-overflow-hidden\u2460"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-hidden"}, "f0809abc": {"dfnID":"f0809abc","dfnText":"&&","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-all"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"https://drafts.csswg.org/css-values-4/#comb-all"}, "f41ab620": {"dfnID":"f41ab620","dfnText":"establish an independent formatting context","external":true,"refSections":[{"refs":[{"id":"ref-for-establish-an-independent-formatting-context"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://drafts.csswg.org/css-display-4/#establish-an-independent-formatting-context"}, "f60f5478": {"dfnID":"f60f5478","dfnText":"-webkit-inline-box","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-flex--webkit-inline-box"}],"title":"5.1.1. \nLegacy compatibility"},{"refs":[{"id":"ref-for-valdef-flex--webkit-inline-box\u2460"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"https://compat.spec.whatwg.org/#valdef-flex--webkit-inline-box"}, "fa646702": {"dfnID":"fa646702","dfnText":"line-right","external":true,"refSections":[{"refs":[{"id":"ref-for-line-right"},{"id":"ref-for-line-right\u2460"},{"id":"ref-for-line-right\u2461"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#line-right"}, "fb030e6c": {"dfnID":"fb030e6c","dfnText":"<length>","external":true,"refSections":[{"refs":[{"id":"ref-for-length-value"},{"id":"ref-for-length-value\u2460"},{"id":"ref-for-length-value\u2461"},{"id":"ref-for-length-value\u2462"}],"title":"3.2. \nExpanding Clipping Bounds: the overflow-clip-margin-* properties"}],"url":"https://drafts.csswg.org/css-values-4/#length-value"}, "fb8f8e00": {"dfnID":"fb8f8e00","dfnText":"strut","external":true,"refSections":[{"refs":[{"id":"ref-for-strut"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"}],"url":"https://www.w3.org/TR/CSS21/visudet.html#strut"}, "funcdef-text-overflow-fade": {"dfnID":"funcdef-text-overflow-fade","dfnText":"fade( [ <length-percentage> ] )","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-text-overflow-fade"},{"id":"ref-for-funcdef-text-overflow-fade\u2460"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"}],"url":"#funcdef-text-overflow-fade"}, "overflow-clip": {"dfnID":"overflow-clip","dfnText":"clip","external":false,"refSections":[],"url":"#overflow-clip"}, "overflow-clip-edge": {"dfnID":"overflow-clip-edge","dfnText":"overflow clip edge","external":false,"refSections":[{"refs":[{"id":"ref-for-overflow-clip-edge"},{"id":"ref-for-overflow-clip-edge\u2460"},{"id":"ref-for-overflow-clip-edge\u2461"},{"id":"ref-for-overflow-clip-edge\u2462"},{"id":"ref-for-overflow-clip-edge\u2463"}],"title":"3.2. \nExpanding Clipping Bounds: the overflow-clip-margin-* properties"}],"url":"#overflow-clip-edge"}, "overflow-ellipsis": {"dfnID":"overflow-ellipsis","dfnText":"ellipsis","external":false,"refSections":[{"refs":[{"id":"ref-for-overflow-ellipsis"}],"title":"\nuser interaction with ellipsis"}],"url":"#overflow-ellipsis"}, "propdef--webkit-line-clamp": {"dfnID":"propdef--webkit-line-clamp","dfnText":"-webkit-line-clamp","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef--webkit-line-clamp"},{"id":"ref-for-propdef--webkit-line-clamp\u2460"},{"id":"ref-for-propdef--webkit-line-clamp\u2461"}],"title":"5.1.1. \nLegacy compatibility"}],"url":"#propdef--webkit-line-clamp"}, "propdef-block-ellipsis": {"dfnID":"propdef-block-ellipsis","dfnText":"block-ellipsis","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-block-ellipsis\u2460"},{"id":"ref-for-propdef-block-ellipsis\u2461"},{"id":"ref-for-propdef-block-ellipsis\u2462"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"},{"refs":[{"id":"ref-for-propdef-block-ellipsis\u2463"},{"id":"ref-for-propdef-block-ellipsis\u2464"},{"id":"ref-for-propdef-block-ellipsis\u2465"},{"id":"ref-for-propdef-block-ellipsis\u2466"},{"id":"ref-for-propdef-block-ellipsis\u2467"}],"title":"5.1. \nLimiting Visible Lines: the line-clamp shorthand property"},{"refs":[{"id":"ref-for-propdef-block-ellipsis\u2468"},{"id":"ref-for-propdef-block-ellipsis\u2460\u24ea"}],"title":"5.1.1. \nLegacy compatibility"}],"url":"#propdef-block-ellipsis"}, "propdef-continue": {"dfnID":"propdef-continue","dfnText":"continue","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-continue"},{"id":"ref-for-propdef-continue\u2460"},{"id":"ref-for-propdef-continue\u2461"}],"title":"5.1. \nLimiting Visible Lines: the line-clamp shorthand property"},{"refs":[{"id":"ref-for-propdef-continue\u2462"},{"id":"ref-for-propdef-continue\u2463"},{"id":"ref-for-propdef-continue\u2464"},{"id":"ref-for-propdef-continue\u2465"}],"title":"5.1.1. \nLegacy compatibility"},{"refs":[{"id":"ref-for-propdef-continue\u2466"},{"id":"ref-for-propdef-continue\u2467"},{"id":"ref-for-propdef-continue\u2468"},{"id":"ref-for-propdef-continue\u2460\u24ea"},{"id":"ref-for-propdef-continue\u2460\u2460"},{"id":"ref-for-propdef-continue\u2460\u2461"},{"id":"ref-for-propdef-continue\u2460\u2462"},{"id":"ref-for-propdef-continue\u2460\u2463"}],"title":"5.3. \nFragmentation of Overflow: the continue property"},{"refs":[{"id":"ref-for-propdef-continue\u2460\u2464"}],"title":"\nRecent Changes"}],"url":"#propdef-continue"}, "propdef-line-clamp": {"dfnID":"propdef-line-clamp","dfnText":"line-clamp","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-line-clamp\u2460"},{"id":"ref-for-propdef-line-clamp\u2461"}],"title":"5.1. \nLimiting Visible Lines: the line-clamp shorthand property"},{"refs":[{"id":"ref-for-propdef-line-clamp\u2462"},{"id":"ref-for-propdef-line-clamp\u2463"}],"title":"5.1.1. \nLegacy compatibility"},{"refs":[{"id":"ref-for-propdef-line-clamp\u2464"}],"title":"5.3. \nFragmentation of Overflow: the continue property"},{"refs":[{"id":"ref-for-propdef-line-clamp\u2465"}],"title":"\nRecent Changes"}],"url":"#propdef-line-clamp"}, "propdef-max-lines": {"dfnID":"propdef-max-lines","dfnText":"max-lines","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-max-lines"},{"id":"ref-for-propdef-max-lines\u2460"},{"id":"ref-for-propdef-max-lines\u2461"}],"title":"5.1. \nLimiting Visible Lines: the line-clamp shorthand property"},{"refs":[{"id":"ref-for-propdef-max-lines\u2462"}],"title":"5.1.1. \nLegacy compatibility"},{"refs":[{"id":"ref-for-propdef-max-lines\u2463"},{"id":"ref-for-propdef-max-lines\u2464"},{"id":"ref-for-propdef-max-lines\u2465"},{"id":"ref-for-propdef-max-lines\u2466"},{"id":"ref-for-propdef-max-lines\u2467"},{"id":"ref-for-propdef-max-lines\u2468"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"},{"refs":[{"id":"ref-for-propdef-max-lines\u2460\u24ea"}],"title":"5.3. \nFragmentation of Overflow: the continue property"},{"refs":[{"id":"ref-for-propdef-max-lines\u2460\u2460"}],"title":"\nRecent Changes"}],"url":"#propdef-max-lines"}, "propdef-overflow-clip-margin": {"dfnID":"propdef-overflow-clip-margin","dfnText":"overflow-clip-margin","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow-clip-margin\u2460"}],"title":"3.1. \nManaging Overflow: the overflow-x, overflow-y, and overflow properties"},{"refs":[{"id":"ref-for-propdef-overflow-clip-margin\u2461"},{"id":"ref-for-propdef-overflow-clip-margin\u2462"}],"title":"3.2. \nExpanding Clipping Bounds: the overflow-clip-margin-* properties"},{"refs":[{"id":"ref-for-propdef-overflow-clip-margin\u2463"},{"id":"ref-for-propdef-overflow-clip-margin\u2464"}],"title":"\nRecent Changes"}],"url":"#propdef-overflow-clip-margin"}, "propdef-overflow-clip-margin-block": {"dfnID":"propdef-overflow-clip-margin-block","dfnText":"overflow-clip-margin-block","external":false,"refSections":[],"url":"#propdef-overflow-clip-margin-block"}, "propdef-overflow-clip-margin-block-end": {"dfnID":"propdef-overflow-clip-margin-block-end","dfnText":"overflow-clip-margin-block-end","external":false,"refSections":[],"url":"#propdef-overflow-clip-margin-block-end"}, "propdef-overflow-clip-margin-block-start": {"dfnID":"propdef-overflow-clip-margin-block-start","dfnText":"overflow-clip-margin-block-start","external":false,"refSections":[],"url":"#propdef-overflow-clip-margin-block-start"}, "propdef-overflow-clip-margin-bottom": {"dfnID":"propdef-overflow-clip-margin-bottom","dfnText":"overflow-clip-margin-bottom","external":false,"refSections":[],"url":"#propdef-overflow-clip-margin-bottom"}, "propdef-overflow-clip-margin-inline": {"dfnID":"propdef-overflow-clip-margin-inline","dfnText":"overflow-clip-margin-inline","external":false,"refSections":[],"url":"#propdef-overflow-clip-margin-inline"}, "propdef-overflow-clip-margin-inline-end": {"dfnID":"propdef-overflow-clip-margin-inline-end","dfnText":"overflow-clip-margin-inline-end","external":false,"refSections":[],"url":"#propdef-overflow-clip-margin-inline-end"}, "propdef-overflow-clip-margin-inline-start": {"dfnID":"propdef-overflow-clip-margin-inline-start","dfnText":"overflow-clip-margin-inline-start","external":false,"refSections":[],"url":"#propdef-overflow-clip-margin-inline-start"}, "propdef-overflow-clip-margin-left": {"dfnID":"propdef-overflow-clip-margin-left","dfnText":"overflow-clip-margin-left","external":false,"refSections":[],"url":"#propdef-overflow-clip-margin-left"}, "propdef-overflow-clip-margin-right": {"dfnID":"propdef-overflow-clip-margin-right","dfnText":"overflow-clip-margin-right","external":false,"refSections":[],"url":"#propdef-overflow-clip-margin-right"}, "propdef-overflow-clip-margin-top": {"dfnID":"propdef-overflow-clip-margin-top","dfnText":"overflow-clip-margin-top","external":false,"refSections":[],"url":"#propdef-overflow-clip-margin-top"}, "propdef-text-overflow": {"dfnID":"propdef-text-overflow","dfnText":"text-overflow","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-text-overflow"},{"id":"ref-for-propdef-text-overflow\u2460"}],"title":"4.1. \nInline Overflow Ellipsis: the text-overflow property"},{"refs":[{"id":"ref-for-propdef-text-overflow\u2461"}],"title":"\nellipsing details"},{"refs":[{"id":"ref-for-propdef-text-overflow\u2462"}],"title":"\nellipsis interaction with scrolling interfaces"},{"refs":[{"id":"ref-for-propdef-text-overflow\u2463"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"},{"refs":[{"id":"ref-for-propdef-text-overflow\u2464"}],"title":"\nRecent Changes"}],"url":"#propdef-text-overflow"}, "valdef-block-ellipsis-auto": {"dfnID":"valdef-block-ellipsis-auto","dfnText":"auto","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-block-ellipsis-auto"}],"title":"5.1. \nLimiting Visible Lines: the line-clamp shorthand property"},{"refs":[{"id":"ref-for-valdef-block-ellipsis-auto\u2460"}],"title":"5.1.1. \nLegacy compatibility"}],"url":"#valdef-block-ellipsis-auto"}, "valdef-block-ellipsis-none": {"dfnID":"valdef-block-ellipsis-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-block-ellipsis-none"},{"id":"ref-for-valdef-block-ellipsis-none\u2460"}],"title":"4.2. \nIndicating Block-Axis Overflow: the block-ellipsis property"},{"refs":[{"id":"ref-for-valdef-block-ellipsis-none\u2461"}],"title":"5.1. \nLimiting Visible Lines: the line-clamp shorthand property"}],"url":"#valdef-block-ellipsis-none"}, "valdef-block-ellipsis-string": {"dfnID":"valdef-block-ellipsis-string","dfnText":"<string>","external":false,"refSections":[],"url":"#valdef-block-ellipsis-string"}, "valdef-continue--webkit-discard": {"dfnID":"valdef-continue--webkit-discard","dfnText":"-webkit-discard","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-continue--webkit-discard"},{"id":"ref-for-valdef-continue--webkit-discard\u2460"}],"title":"5.1.1. \nLegacy compatibility"}],"url":"#valdef-continue--webkit-discard"}, "valdef-continue-auto": {"dfnID":"valdef-continue-auto","dfnText":"auto","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-continue-auto"}],"title":"5.1. \nLimiting Visible Lines: the line-clamp shorthand property"},{"refs":[{"id":"ref-for-valdef-continue-auto\u2460"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"#valdef-continue-auto"}, "valdef-continue-discard": {"dfnID":"valdef-continue-discard","dfnText":"discard","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-continue-discard"}],"title":"5.1. \nLimiting Visible Lines: the line-clamp shorthand property"},{"refs":[{"id":"ref-for-valdef-continue-discard\u2460"},{"id":"ref-for-valdef-continue-discard\u2461"}],"title":"5.1.1. \nLegacy compatibility"},{"refs":[{"id":"ref-for-valdef-continue-discard\u2462"}],"title":"5.3. \nFragmentation of Overflow: the continue property"}],"url":"#valdef-continue-discard"}, "valdef-line-clamp-block-ellipsis": {"dfnID":"valdef-line-clamp-block-ellipsis","dfnText":"<block-ellipsis>","external":false,"refSections":[],"url":"#valdef-line-clamp-block-ellipsis"}, "valdef-line-clamp-integer-1": {"dfnID":"valdef-line-clamp-integer-1","dfnText":"<integer [1,\u221e]>","external":false,"refSections":[],"url":"#valdef-line-clamp-integer-1"}, "valdef-line-clamp-none": {"dfnID":"valdef-line-clamp-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-clamp-none"}],"title":"5.1.1. \nLegacy compatibility"}],"url":"#valdef-line-clamp-none"}, "valdef-max-lines-none": {"dfnID":"valdef-max-lines-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-max-lines-none"},{"id":"ref-for-valdef-max-lines-none\u2460"}],"title":"5.1. \nLimiting Visible Lines: the line-clamp shorthand property"},{"refs":[{"id":"ref-for-valdef-max-lines-none\u2461"},{"id":"ref-for-valdef-max-lines-none\u2462"},{"id":"ref-for-valdef-max-lines-none\u2463"}],"title":"5.2. \nForcing a Break After a Set Number of Lines: the max-lines property"}],"url":"#valdef-max-lines-none"}, "valdef-overflow-clip-margin-length-0": {"dfnID":"valdef-overflow-clip-margin-length-0","dfnText":"<length [0,\u221e]>","external":false,"refSections":[],"url":"#valdef-overflow-clip-margin-length-0"}, "valdef-overflow-clip-margin-visual-box": {"dfnID":"valdef-overflow-clip-margin-visual-box","dfnText":"<visual-box>","external":false,"refSections":[],"url":"#valdef-overflow-clip-margin-visual-box"}, "valdef-scrollbar-gutter-always": {"dfnID":"valdef-scrollbar-gutter-always","dfnText":"always","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-scrollbar-gutter-always"},{"id":"ref-for-valdef-scrollbar-gutter-always\u2460"},{"id":"ref-for-valdef-scrollbar-gutter-always\u2461"},{"id":"ref-for-valdef-scrollbar-gutter-always\u2462"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"#valdef-scrollbar-gutter-always"}, "valdef-scrollbar-gutter-match-parent": {"dfnID":"valdef-scrollbar-gutter-match-parent","dfnText":"match-parent","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-scrollbar-gutter-match-parent"},{"id":"ref-for-valdef-scrollbar-gutter-match-parent\u2460"},{"id":"ref-for-valdef-scrollbar-gutter-match-parent\u2461"},{"id":"ref-for-valdef-scrollbar-gutter-match-parent\u2462"},{"id":"ref-for-valdef-scrollbar-gutter-match-parent\u2463"}],"title":"\nAppendix A: Possible extensions for scrollbar-gutter"}],"url":"#valdef-scrollbar-gutter-match-parent"}, "valdef-text-overflow-fade": {"dfnID":"valdef-text-overflow-fade","dfnText":"fade","external":false,"refSections":[],"url":"#valdef-text-overflow-fade"}, }; document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }); window.addEventListener("resize", () => { // Pin any visible dfn panel queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); }); function genAllDfnPanels() { for(const panelData of Object.values(dfnPanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); continue; } dfn.panelData = panelData; insertDfnPopupAction(dfn); } } function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { const dfnPanel = mk.aside({ class: "dfn-panel on", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url, class:"dfn-link"}, url), refSections.length == 0 ? [] : mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), genLinkingSyntaxes(dfn), ); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { scrollToTargetAndHighlight(event); pinDfnPanel(dfnPanel); } event.stopPropagation(); refocusOnTarget(event); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel({dfnPanel}); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.dfn = dfn; dfn.dfnPanel = dfnPanel; return dfnPanel; } function hideAllDfnPanels() { // Delete the currently-active dfn panel. queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); } function showDfnPanel(dfn) { hideAllDfnPanels(); // Only display one at a time. dfn.setAttribute("aria-expanded", "true"); const dfnPanel = genDfnPanel(dfn, dfn.panelData); // Give the dfn a unique tabindex, and then // give all the tabbable panel bits successive indexes. let tabIndex = 100; dfn.tabIndex = tabIndex++; const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); for (const el of tabbable) { el.tabIndex = tabIndex++; } append(document.body, dfnPanel); positionDfnPanel(dfnPanel); } function positionDfnPanel(dfnPanel) { const dfn = dfnPanel.dfn; const dfnPos = getBounds(dfn); dfnPanel.style.top = dfnPos.bottom + "px"; dfnPanel.style.left = dfnPos.left + "px"; const panelPos = dfnPanel.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); dfnPanel.style.left = newLeft + "px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.position = "fixed"; dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel({dfn, dfnPanel}) { if(!dfnPanel) dfnPanel = dfn.dfnPanel; if(!dfn) dfn = dfnPanel.dfn; dfn.dfnPanel = undefined; dfnPanel.dfn = undefined; dfn.setAttribute("aria-expanded", "false"); dfn.tabIndex = undefined; dfnPanel.remove() } function toggleDfnPanel(dfn) { if(dfn.dfnPanel) { hideDfnPanel(dfn); } else { showDfnPanel(dfn); } } function insertDfnPopupAction(dfn) { dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { toggleDfnPanel(dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfn); event.stopPropagation(); event.preventDefault(); } }); } function refocusOnTarget(event) { const target = event.target; setTimeout(() => { // Refocus on the event.target element. // This is needed after browser scrolls to the destination. target.focus(); }); } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function scrollToTargetAndHighlight(event) { let hash = event.target.hash; if (hash) { hash = decodeURIComponent(hash.substring(1)); const dest = document.getElementById(hash); if (dest) { dest.classList.add('highlighted'); setTimeout(() => dest.classList.remove('highlighted'), 1000); } } } // Functions, divided by link type, that wrap an autolink's // contents with the appropriate outer syntax. // Alternately, a string naming another type they format // the same as. function needsFor(type) { switch(type) { case "descriptor": case "value": case "element-attr": case "attr-value": case "element-state": case "method": case "constructor": case "argument": case "attribute": case "const": case "dict-member": case "event": case "enum-value": case "stringifier": case "serializer": case "iterator": case "maplike": case "setlike": case "state": case "mode": case "context": case "facet": return true; default: return false; } } function refusesFor(type) { switch(type) { case "property": case "element": case "interface": case "namespace": case "callback": case "dictionary": case "enum": case "exception": case "typedef": case "http-header": case "permission": return true; default: return false; } } function linkFormatterFromType(type) { switch(type) { case 'scheme': case 'permission': case 'dfn': return (text) => `[=${text}=]`; case 'abstract-op': return (text) => `[\$${text}\$]`; case 'function': case 'at-rule': case 'selector': case 'value': return (text) => `''${text}''`; case 'http-header': return (text) => `[:${text}:]`; case 'interface': case 'constructor': case 'method': case 'argument': case 'attribute': case 'callback': case 'dictionary': case 'dict-member': case 'enum': case 'enum-value': case 'exception': case 'const': case 'typedef': case 'stringifier': case 'serializer': case 'iterator': case 'maplike': case 'setlike': case 'extended-attribute': case 'event': case 'idl': return (text) => `{{${text}}}`; case 'element-state': case 'element-attr': case 'attr-value': case 'element': return (element) => `<{${element}}>`; case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; case 'type': return (text)=> `<<${text}>>`; case 'descriptor': case 'property': return (text) => `'${text}'`; default: return; }; }; function genLinkingSyntaxes(dfn) { if(dfn.tagName != "DFN") return; const type = dfn.getAttribute('data-dfn-type'); if(!type) { console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); return []; } // Return a function that wraps link text based on the type const linkFormatter = linkFormatterFromType(type); if(!linkFormatter) { console.log(`<dfn> has an unknown data-dfn-type:`, dfn); return []; } let ltAlts; if(dfn.hasAttribute('data-lt')) { ltAlts = dfn.getAttribute('data-lt') .split("|") .map(x=>x.trim()); } else { ltAlts = [dfn.textContent.trim()]; } if(type == "type") { // lt of "<foo>", but "foo" is the interior; // <<foo/bar>> is how you write it with a for, // not <foo/<bar>> or whatever. for(var i = 0; i < ltAlts.length; i++) { const lt = ltAlts[i]; const match = /<(.*)>/.exec(lt); if(match) { ltAlts[i] = match[1]; } } } let forAlts; if(dfn.hasAttribute('data-dfn-for')) { forAlts = dfn.getAttribute('data-dfn-for') .split(",") .map(x=>x.trim()); } else { forAlts = ['']; } let linkingSyntaxes = []; if(!needsFor(type)) { for(const lt of ltAlts) { linkingSyntaxes.push(linkFormatter(lt)); } } if(!refusesFor(type)) { for(const f of forAlts) { linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) } } return [ mk.b({}, 'Possible linking syntaxes:'), mk.ul({}, ...linkingSyntaxes.map(link => { const copyLink = async () => await navigator.clipboard.writeText(link); return mk.li({}, mk.div({ class: 'link-item' }, mk.button({ class: 'copy-icon', title: 'Copy', type: 'button', _onclick: copyLink, tabindex: 0, }, mk.span({ class: 'icon' }) ), mk.span({}, link) ) ); }) ) ]; } } </script> <script>/* Boilerplate: script-link-titles */ "use strict"; { let linkTitleData = { "https://drafts.csswg.org/css-box-4/#typedef-visual-box": "Expands to: border-box | content-box | padding-box", "https://drafts.csswg.org/css-values-4/#length-value": "Expands to: advance measure | cap | ch | cm | dvb | dvh | dvi | dvmax | dvmin | dvw | em | ex | ic | in | lh | lvb | lvh | lvi | lvmax | lvmin | lvw | mm | pc | pt | px | rcap | rch | rem | rex | ric | rlh | svb | svh | svi | svmax | svmin | svw | vb | vh | vi | vmax | vmin | vw", }; function setTypeTitles() { for(let el of document.querySelectorAll("a[href]")) { if(el.href in linkTitleData && !el.hasAttribute("title")) { el.setAttribute("title", linkTitleData[el.href]); } } } document.addEventListener("DOMContentLoaded", setTypeTitles); } </script> <script>/* Boilerplate: script-position-annos */ "use strict"; { function repositionAnnoPanels(){ const panels = [...document.querySelectorAll("[data-anno-for]")]; hydratePanels(panels); let vSoFar = 0; for(const panel of panels.sort(cmpTops)) { if(panel.top < vSoFar) { panel.top = vSoFar; panel.style.top = vSoFar + "px"; } vSoFar = panel.top + panel.height + 15; } } function hydratePanels(panels) { const main = document.querySelector("main"); let mainRect; if(main) mainRect = main.getBoundingClientRect(); // First display them all, if they're not already visible. for(const panel of panels) { panel.classList.remove("unpositioned"); } // Measure them all for(const panel of panels) { const dfn = document.getElementById(panel.getAttribute("data-anno-for")); if(!dfn) { console.log("Can't find the annotation panel target:", panel); continue; } panel.dfn = dfn; panel.top = window.scrollY + dfn.getBoundingClientRect().top; let panelRect = panel.getBoundingClientRect(); panel.height = panelRect.height; if(main) { panel.overlappingMain = panelRect.left < mainRect.right; } else { panel.overlappingMain = false; } } // And finally position them for(const panel of panels) { const dfn = panel.dfn; if(!dfn) continue; panel.style.top = panel.top + "px"; panel.classList.toggle("overlapping-main", panel.overlappingMain); } } function cmpTops(a,b) { return a.top - b.top; } window.addEventListener("load", repositionAnnoPanels); window.addEventListener("resize", repositionAnnoPanels); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#block-overflow-ellipsis": {"displayText":"block overflow ellipsis","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"block overflow ellipsis","type":"dfn","url":"#block-overflow-ellipsis"}, "#funcdef-text-overflow-fade": {"displayText":"fade()","export":true,"for_":["text-overflow"],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"fade()","type":"function","url":"#funcdef-text-overflow-fade"}, "#overflow-clip-edge": {"displayText":"overflow clip edge","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"overflow clip edge","type":"dfn","url":"#overflow-clip-edge"}, "#overflow-ellipsis": {"displayText":"ellipsis","export":true,"for_":["text-overflow"],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"ellipsis","type":"value","url":"#overflow-ellipsis"}, "#propdef--webkit-line-clamp": {"displayText":"-webkit-line-clamp","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"-webkit-line-clamp","type":"property","url":"#propdef--webkit-line-clamp"}, "#propdef-block-ellipsis": {"displayText":"block-ellipsis","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"block-ellipsis","type":"property","url":"#propdef-block-ellipsis"}, "#propdef-continue": {"displayText":"continue","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"continue","type":"property","url":"#propdef-continue"}, "#propdef-line-clamp": {"displayText":"line-clamp","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"line-clamp","type":"property","url":"#propdef-line-clamp"}, "#propdef-max-lines": {"displayText":"max-lines","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"max-lines","type":"property","url":"#propdef-max-lines"}, "#propdef-overflow-clip-margin": {"displayText":"overflow-clip-margin","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"overflow-clip-margin","type":"property","url":"#propdef-overflow-clip-margin"}, "#propdef-overflow-clip-margin-block": {"displayText":"overflow-clip-margin-block","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"overflow-clip-margin-block","type":"property","url":"#propdef-overflow-clip-margin-block"}, "#propdef-overflow-clip-margin-block-end": {"displayText":"overflow-clip-margin-block-end","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"overflow-clip-margin-block-end","type":"property","url":"#propdef-overflow-clip-margin-block-end"}, "#propdef-overflow-clip-margin-block-start": {"displayText":"overflow-clip-margin-block-start","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"overflow-clip-margin-block-start","type":"property","url":"#propdef-overflow-clip-margin-block-start"}, "#propdef-overflow-clip-margin-bottom": {"displayText":"overflow-clip-margin-bottom","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"overflow-clip-margin-bottom","type":"property","url":"#propdef-overflow-clip-margin-bottom"}, "#propdef-overflow-clip-margin-inline": {"displayText":"overflow-clip-margin-inline","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"overflow-clip-margin-inline","type":"property","url":"#propdef-overflow-clip-margin-inline"}, "#propdef-overflow-clip-margin-inline-end": {"displayText":"overflow-clip-margin-inline-end","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"overflow-clip-margin-inline-end","type":"property","url":"#propdef-overflow-clip-margin-inline-end"}, "#propdef-overflow-clip-margin-inline-start": {"displayText":"overflow-clip-margin-inline-start","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"overflow-clip-margin-inline-start","type":"property","url":"#propdef-overflow-clip-margin-inline-start"}, "#propdef-overflow-clip-margin-left": {"displayText":"overflow-clip-margin-left","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"overflow-clip-margin-left","type":"property","url":"#propdef-overflow-clip-margin-left"}, "#propdef-overflow-clip-margin-right": {"displayText":"overflow-clip-margin-right","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"overflow-clip-margin-right","type":"property","url":"#propdef-overflow-clip-margin-right"}, "#propdef-overflow-clip-margin-top": {"displayText":"overflow-clip-margin-top","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"overflow-clip-margin-top","type":"property","url":"#propdef-overflow-clip-margin-top"}, "#propdef-text-overflow": {"displayText":"text-overflow","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"text-overflow","type":"property","url":"#propdef-text-overflow"}, "#valdef-block-ellipsis-auto": {"displayText":"auto","export":true,"for_":["block-ellipsis"],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"auto","type":"value","url":"#valdef-block-ellipsis-auto"}, "#valdef-block-ellipsis-none": {"displayText":"none","export":true,"for_":["block-ellipsis"],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"none","type":"value","url":"#valdef-block-ellipsis-none"}, "#valdef-continue--webkit-discard": {"displayText":"-webkit-discard","export":true,"for_":["continue"],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"-webkit-discard","type":"value","url":"#valdef-continue--webkit-discard"}, "#valdef-continue-auto": {"displayText":"auto","export":true,"for_":["continue"],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"auto","type":"value","url":"#valdef-continue-auto"}, "#valdef-continue-discard": {"displayText":"discard","export":true,"for_":["continue"],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"discard","type":"value","url":"#valdef-continue-discard"}, "#valdef-line-clamp-none": {"displayText":"none","export":true,"for_":["line-clamp"],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"none","type":"value","url":"#valdef-line-clamp-none"}, "#valdef-max-lines-none": {"displayText":"none","export":true,"for_":["max-lines"],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"none","type":"value","url":"#valdef-max-lines-none"}, "#valdef-scrollbar-gutter-always": {"displayText":"always","export":true,"for_":["scrollbar-gutter"],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"always","type":"value","url":"#valdef-scrollbar-gutter-always"}, "#valdef-scrollbar-gutter-match-parent": {"displayText":"match-parent","export":true,"for_":["scrollbar-gutter"],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"local","text":"match-parent","type":"value","url":"#valdef-scrollbar-gutter-match-parent"}, "https://compat.spec.whatwg.org/#propdef--webkit-box-orient": {"displayText":"-webkit-box-orient","export":true,"for_":[],"level":"1","normative":true,"shortname":"compat","spec":"compat","status":"current","text":"-webkit-box-orient","type":"property","url":"https://compat.spec.whatwg.org/#propdef--webkit-box-orient"}, "https://compat.spec.whatwg.org/#valdef-flex--webkit-box": {"displayText":"-webkit-box","export":true,"for_":["flex"],"level":"1","normative":true,"shortname":"compat","spec":"compat","status":"current","text":"-webkit-box","type":"value","url":"https://compat.spec.whatwg.org/#valdef-flex--webkit-box"}, "https://compat.spec.whatwg.org/#valdef-flex--webkit-inline-box": {"displayText":"-webkit-inline-box","export":true,"for_":["flex"],"level":"1","normative":true,"shortname":"compat","spec":"compat","status":"current","text":"-webkit-inline-box","type":"value","url":"https://compat.spec.whatwg.org/#valdef-flex--webkit-inline-box"}, "https://drafts.csswg.org/css-backgrounds-3/#box-shadow-outer-box-shadow": {"displayText":"outer box-shadow","export":true,"for_":["box-shadow"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"outer box-shadow","type":"dfn","url":"https://drafts.csswg.org/css-backgrounds-3/#box-shadow-outer-box-shadow"}, "https://drafts.csswg.org/css-box-4/#border-edge": {"displayText":"border edge","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"border edge","type":"dfn","url":"https://drafts.csswg.org/css-box-4/#border-edge"}, "https://drafts.csswg.org/css-box-4/#propdef-margin": {"displayText":"margin","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin"}, "https://drafts.csswg.org/css-box-4/#typedef-visual-box": {"displayText":"<visual-box>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"<visual-box>","type":"type","url":"https://drafts.csswg.org/css-box-4/#typedef-visual-box"}, "https://drafts.csswg.org/css-break-3/#propdef-break-after": {"displayText":"break-after","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"current","text":"break-after","type":"property","url":"https://drafts.csswg.org/css-break-3/#propdef-break-after"}, "https://drafts.csswg.org/css-break-3/#propdef-break-before": {"displayText":"break-before","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"current","text":"break-before","type":"property","url":"https://drafts.csswg.org/css-break-3/#propdef-break-before"}, "https://drafts.csswg.org/css-break-3/#propdef-break-inside": {"displayText":"break-inside","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"current","text":"break-inside","type":"property","url":"https://drafts.csswg.org/css-break-3/#propdef-break-inside"}, "https://drafts.csswg.org/css-break-3/#propdef-orphans": {"displayText":"orphans","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"current","text":"orphans","type":"property","url":"https://drafts.csswg.org/css-break-3/#propdef-orphans"}, "https://drafts.csswg.org/css-break-4/#forced-break": {"displayText":"forced break","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"forced break","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#forced-break"}, "https://drafts.csswg.org/css-break-4/#fragmentation-break": {"displayText":"fragmentation break","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"fragmentation break","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#fragmentation-break"}, "https://drafts.csswg.org/css-break-4/#fragmentation-container": {"displayText":"fragmentation container","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"fragmentation container","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#fragmentation-container"}, "https://drafts.csswg.org/css-break-4/#fragmentation-context": {"displayText":"fragmentation context","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"fragmentation context","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#fragmentation-context"}, "https://drafts.csswg.org/css-break-4/#fragmentation-direction": {"displayText":"fragmentation direction","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"fragmentation direction","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#fragmentation-direction"}, "https://drafts.csswg.org/css-break-4/#fragmented-flow": {"displayText":"fragmented flow","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"fragmented flow","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#fragmented-flow"}, "https://drafts.csswg.org/css-break-4/#propdef-widows": {"displayText":"widows","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"widows","type":"property","url":"https://drafts.csswg.org/css-break-4/#propdef-widows"}, "https://drafts.csswg.org/css-break-4/#region-break": {"displayText":"region break","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"region break","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#region-break"}, "https://drafts.csswg.org/css-break-4/#unforced-break": {"displayText":"unforced break","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"unforced break","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#unforced-break"}, "https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua": {"displayText":"UA style sheet","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"ua style sheet","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua"}, "https://drafts.csswg.org/css-cascade-5/#computed-value": {"displayText":"computed value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"computed value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "https://drafts.csswg.org/css-cascade-5/#longhand": {"displayText":"longhand","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"longhand","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#longhand"}, "https://drafts.csswg.org/css-cascade-5/#shorthand-property": {"displayText":"shorthand","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"shorthand","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#shorthand-property"}, "https://drafts.csswg.org/css-cascade-5/#specified-value": {"displayText":"specified value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"specified value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#specified-value"}, "https://drafts.csswg.org/css-cascade-5/#used-value": {"displayText":"used value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"used value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#used-value"}, "https://drafts.csswg.org/css-display-4/#bfc": {"displayText":"BFC","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"bfc","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#bfc"}, "https://drafts.csswg.org/css-display-4/#block-container": {"displayText":"block container","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block container","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-container"}, "https://drafts.csswg.org/css-display-4/#block-formatting-context": {"displayText":"block formatting context","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block formatting context","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-formatting-context"}, "https://drafts.csswg.org/css-display-4/#block-level": {"displayText":"block-level","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block-level","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-level"}, "https://drafts.csswg.org/css-display-4/#establish-an-independent-formatting-context": {"displayText":"establish an independent formatting context","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"establish an independent formatting context","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#establish-an-independent-formatting-context"}, "https://drafts.csswg.org/css-display-4/#in-flow": {"displayText":"in-flow","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"in-flow","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#in-flow"}, "https://drafts.csswg.org/css-display-4/#independent-formatting-context": {"displayText":"independent formatting context","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"independent formatting context","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#independent-formatting-context"}, "https://drafts.csswg.org/css-display-4/#inline-formatting-context": {"displayText":"inline formatting context","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline formatting context","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#inline-formatting-context"}, "https://drafts.csswg.org/css-display-4/#propdef-display": {"displayText":"display","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"display","type":"property","url":"https://drafts.csswg.org/css-display-4/#propdef-display"}, "https://drafts.csswg.org/css-display-4/#replaced-element": {"displayText":"replaced element","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"replaced element","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#replaced-element"}, "https://drafts.csswg.org/css-display-4/#valdef-display-flow-root": {"displayText":"flow-root","export":true,"for_":["display","<display-inside>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"flow-root","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-flow-root"}, "https://drafts.csswg.org/css-display-4/#valdef-display-inline-block": {"displayText":"inline-block","export":true,"for_":["display","<display-legacy>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline-block","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-inline-block"}, "https://drafts.csswg.org/css-flexbox-1/#flex-container": {"displayText":"flex container","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"flex container","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#flex-container"}, "https://drafts.csswg.org/css-inline-3/#line-box": {"displayText":"line box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"line box","type":"dfn","url":"https://drafts.csswg.org/css-inline-3/#line-box"}, "https://drafts.csswg.org/css-inline-3/#root-inline-box": {"displayText":"root inline box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"root inline box","type":"dfn","url":"https://drafts.csswg.org/css-inline-3/#root-inline-box"}, "https://drafts.csswg.org/css-multicol-1/#multi-column-container": {"displayText":"multi-column container","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-multicol","spec":"css-multicol-1","status":"current","text":"multi-column container","type":"dfn","url":"https://drafts.csswg.org/css-multicol-1/#multi-column-container"}, "https://drafts.csswg.org/css-multicol-1/#overflow-columns": {"displayText":"overflow columns","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-multicol","spec":"css-multicol-1","status":"current","text":"overflow columns","type":"dfn","url":"https://drafts.csswg.org/css-multicol-1/#overflow-columns"}, "https://drafts.csswg.org/css-overflow-3/#overlay-scrollbars": {"displayText":"overlay scrollbars","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"overlay scrollbars","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#overlay-scrollbars"}, "https://drafts.csswg.org/css-overflow-3/#propdef-overflow": {"displayText":"overflow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"overflow","type":"property","url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow"}, "https://drafts.csswg.org/css-overflow-3/#propdef-overflow-x": {"displayText":"overflow-x","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"overflow-x","type":"property","url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow-x"}, "https://drafts.csswg.org/css-overflow-3/#propdef-overflow-y": {"displayText":"overflow-y","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"overflow-y","type":"property","url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow-y"}, "https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter": {"displayText":"scrollbar-gutter","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"scrollbar-gutter","type":"property","url":"https://drafts.csswg.org/css-overflow-3/#propdef-scrollbar-gutter"}, "https://drafts.csswg.org/css-overflow-3/#scroll-container": {"displayText":"scroll container","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"scroll container","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#scroll-container"}, "https://drafts.csswg.org/css-overflow-3/#scrollable-overflow": {"displayText":"scrollable overflow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"scrollable overflow","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#scrollable-overflow"}, "https://drafts.csswg.org/css-overflow-3/#scrollbar-gutter": {"displayText":"scrollbar gutter","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"scrollbar gutter","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#scrollbar-gutter"}, "https://drafts.csswg.org/css-overflow-3/#valdef-overflow-auto": {"displayText":"auto","export":true,"for_":["overflow","overflow-x","overflow-y"],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"auto","type":"value","url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-auto"}, "https://drafts.csswg.org/css-overflow-3/#valdef-overflow-clip": {"displayText":"clip","export":true,"for_":["overflow","overflow-x","overflow-y"],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"clip","type":"value","url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-clip"}, "https://drafts.csswg.org/css-overflow-3/#valdef-overflow-hidden": {"displayText":"hidden","export":true,"for_":["overflow","overflow-x","overflow-y"],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"hidden","type":"value","url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-hidden"}, "https://drafts.csswg.org/css-overflow-3/#valdef-overflow-scroll": {"displayText":"scroll","export":true,"for_":["overflow","overflow-x","overflow-y"],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"scroll","type":"value","url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-scroll"}, "https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible": {"displayText":"visible","export":true,"for_":["overflow","overflow-x","overflow-y"],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"visible","type":"value","url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible"}, "https://drafts.csswg.org/css-overflow-3/#valdef-scrollbar-gutter-auto": {"displayText":"auto","export":true,"for_":["scrollbar-gutter"],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"auto","type":"value","url":"https://drafts.csswg.org/css-overflow-3/#valdef-scrollbar-gutter-auto"}, "https://drafts.csswg.org/css-overflow-3/#valdef-scrollbar-gutter-stable": {"displayText":"stable","export":true,"for_":["scrollbar-gutter"],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"stable","type":"value","url":"https://drafts.csswg.org/css-overflow-3/#valdef-scrollbar-gutter-stable"}, "https://drafts.csswg.org/css-position-3/#positioned-box": {"displayText":"positioned","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"positioned","type":"dfn","url":"https://drafts.csswg.org/css-position-3/#positioned-box"}, "https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter": {"displayText":"::first-letter","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"::first-letter","type":"selector","url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter"}, "https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line": {"displayText":"::first-line","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"::first-line","type":"selector","url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line"}, "https://drafts.csswg.org/css-sizing-3/#max-content": {"displayText":"max-content size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"max-content size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#max-content"}, "https://drafts.csswg.org/css-sizing-3/#min-content": {"displayText":"min-content size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"min-content size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#min-content"}, "https://drafts.csswg.org/css-sizing-3/#min-content-inline-size": {"displayText":"min-content inline size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"min-content inline size","type":"dfn","url":"https://drafts.csswg.org/css-sizing-3/#min-content-inline-size"}, "https://drafts.csswg.org/css-syntax-3/#css-ignored": {"displayText":"ignored","export":true,"for_":["css"],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"ignored","type":"dfn","url":"https://drafts.csswg.org/css-syntax-3/#css-ignored"}, "https://drafts.csswg.org/css-text-4/#content-language": {"displayText":"content language","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"content language","type":"dfn","url":"https://drafts.csswg.org/css-text-4/#content-language"}, "https://drafts.csswg.org/css-text-4/#propdef-overflow-wrap": {"displayText":"overflow-wrap","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"overflow-wrap","type":"property","url":"https://drafts.csswg.org/css-text-4/#propdef-overflow-wrap"}, "https://drafts.csswg.org/css-text-4/#soft-wrap-opportunity": {"displayText":"soft wrap opportunity","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"soft wrap opportunity","type":"dfn","url":"https://drafts.csswg.org/css-text-4/#soft-wrap-opportunity"}, "https://drafts.csswg.org/css-values-4/#comb-all": {"displayText":"&&","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"&&","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-all"}, "https://drafts.csswg.org/css-values-4/#comb-any": {"displayText":"||","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"||","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-any"}, "https://drafts.csswg.org/css-values-4/#comb-one": {"displayText":"|","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"|","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "https://drafts.csswg.org/css-values-4/#css-wide-keywords": {"displayText":"CSS-wide keywords","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"css-wide keywords","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "https://drafts.csswg.org/css-values-4/#integer-value": {"displayText":"<integer>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<integer>","type":"type","url":"https://drafts.csswg.org/css-values-4/#integer-value"}, "https://drafts.csswg.org/css-values-4/#length-value": {"displayText":"<length>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<length>","type":"type","url":"https://drafts.csswg.org/css-values-4/#length-value"}, "https://drafts.csswg.org/css-values-4/#mult-num-range": {"displayText":"{A,B}","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"{a,b}","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-num-range"}, "https://drafts.csswg.org/css-values-4/#mult-opt": {"displayText":"?","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"?","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "https://drafts.csswg.org/css-values-4/#percentage-value": {"displayText":"<percentage>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<percentage>","type":"type","url":"https://drafts.csswg.org/css-values-4/#percentage-value"}, "https://drafts.csswg.org/css-values-4/#string-value": {"displayText":"<string>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<string>","type":"type","url":"https://drafts.csswg.org/css-values-4/#string-value"}, "https://drafts.csswg.org/css-values-4/#typedef-length-percentage": {"displayText":"<length-percentage>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<length-percentage>","type":"type","url":"https://drafts.csswg.org/css-values-4/#typedef-length-percentage"}, "https://drafts.csswg.org/css-writing-modes-3/#physical-left": {"displayText":"left","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"left","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-3/#physical-left"}, "https://drafts.csswg.org/css-writing-modes-3/#propdef-direction": {"displayText":"direction","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"direction","type":"property","url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi": {"displayText":"unicode-bidi","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"unicode-bidi","type":"property","url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi"}, "https://drafts.csswg.org/css-writing-modes-4/#block-size": {"displayText":"block size","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"block size","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#block-size"}, "https://drafts.csswg.org/css-writing-modes-4/#css-end": {"displayText":"end","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"end","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#css-end"}, "https://drafts.csswg.org/css-writing-modes-4/#css-start": {"displayText":"start","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"start","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#css-start"}, "https://drafts.csswg.org/css-writing-modes-4/#inline-size": {"displayText":"inline size","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"inline size","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#inline-size"}, "https://drafts.csswg.org/css-writing-modes-4/#line-left": {"displayText":"line-left","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"line-left","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#line-left"}, "https://drafts.csswg.org/css-writing-modes-4/#line-right": {"displayText":"line-right","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"line-right","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#line-right"}, "https://drafts.csswg.org/css-writing-modes-4/#writing-mode": {"displayText":"writing mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"writing mode","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#writing-mode"}, "https://drafts.csswg.org/css2/#propdef-line-height": {"displayText":"line-height","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"line-height","type":"property","url":"https://drafts.csswg.org/css2/#propdef-line-height"}, "https://drafts.fxtf.org/css-masking-1/#propdef-mask-image": {"displayText":"mask-image","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"current","text":"mask-image","type":"property","url":"https://drafts.fxtf.org/css-masking-1/#propdef-mask-image"}, "https://www.w3.org/TR/CSS21/visudet.html#strut": {"displayText":"strut","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"","status":"anchor-block","text":"strut","type":"dfn","url":"https://www.w3.org/TR/CSS21/visudet.html#strut"}, "https://www.w3.org/TR/css-overflow-4/#valdef-scrollbar-gutter-force": {"displayText":"force","export":true,"for_":["scrollbar-gutter"],"level":"4","normative":false,"shortname":"css-overflow","spec":"css-overflow-4","status":"snapshot","text":"force","type":"value","url":"https://www.w3.org/TR/css-overflow-4/#valdef-scrollbar-gutter-force"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.displayText.toLowerCase() != linkText.toLowerCase()) { // Give the original term if it's being displayed in a different way. // But allow casing differences, they're insignificant. dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.displayText) ); } const forList = ref.for_; let forListElements; if(forList.length == 0) { forListElements = []; } else if(forList.length == 1) { forListElements = mk.li({}, mk.b({}, "For: "), mk.span({}, forList[0]), ); } else { forListElements = mk.li({}, mk.b({}, "For: "), mk.ul({}, ...forList.map(forItem => mk.li({}, mk.span({}, forItem) ), ), ), ); } const url = ref.url; const safeUrl = encodeURIComponent(url); const hintPanel = mk.aside({ class: "ref-hint", id: `ref-hint-for-${safeUrl}`, "data-for": url, "aria-labelled-by": `ref-hint-for-${safeUrl}`, }, mk.ul({}, dfnTextElements, mk.li({}, mk.b({}, "URL: "), mk.a({ href: url, class: "ref" }, url), ), mk.li({}, mk.b({}, "Type: "), mk.span({}, `${ref.type}`), ), mk.li({}, mk.b({}, "Spec: "), mk.span({}, `${ref.spec ? ref.spec : ''}`), ), forListElements ), ); hintPanel.forLink = link; setupRefHintEventListeners(link, hintPanel); return hintPanel; } function hideAllRefHints() { queryAll(".ref-hint").forEach(el=>hideRefHint(el)); } function hideRefHint(refHint) { const link = refHint.forLink; link.setAttribute("aria-expanded", "false"); if(refHint.teardownEventListeners) { refHint.teardownEventListeners(); } refHint.remove(); } function showRefHint(link) { if(link.classList.contains("dfn-link")) return; const url = link.getAttribute("href"); const ref = refsData[url]; if(!ref) return; hideAllRefHints(); // Only display one at this time. const refHint = mkRefHint(link, ref); append(document.body, refHint); link.setAttribute("aria-expanded", "true"); positionRefHint(refHint); } function setupRefHintEventListeners(link, refHint) { if (refHint.teardownEventListeners) return; // Add event handlers to hide the refHint after the user moves away // from both the link and refHint, if not hovering either within one second. let timeout = null; const startHidingRefHint = (event) => { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { hideRefHint(refHint); }, 1000); } const resetHidingRefHint = (event) => { if (timeout) clearTimeout(timeout); timeout = null; }; link.addEventListener("mouseleave", startHidingRefHint); link.addEventListener("mouseenter", resetHidingRefHint); link.addEventListener("blur", startHidingRefHint); link.addEventListener("focus", resetHidingRefHint); refHint.addEventListener("mouseleave", startHidingRefHint); refHint.addEventListener("mouseenter", resetHidingRefHint); refHint.addEventListener("blur", startHidingRefHint); refHint.addEventListener("focus", resetHidingRefHint); refHint.teardownEventListeners = () => { // remove event listeners resetHidingRefHint(); link.removeEventListener("mouseleave", startHidingRefHint); link.removeEventListener("mouseenter", resetHidingRefHint); link.removeEventListener("blur", startHidingRefHint); link.removeEventListener("focus", resetHidingRefHint); refHint.removeEventListener("mouseleave", startHidingRefHint); refHint.removeEventListener("mouseenter", resetHidingRefHint); refHint.removeEventListener("blur", startHidingRefHint); refHint.removeEventListener("focus", resetHidingRefHint); }; } function positionRefHint(refHint) { const link = refHint.forLink; const linkPos = getBounds(link); refHint.style.top = linkPos.bottom + "px"; refHint.style.left = linkPos.left + "px"; const panelPos = refHint.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); refHint.style.left = newLeft + "px"; } } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function showRefHintListener(e) { // If the target isn't in a link (or is a link), // just ignore it. let link = e.target.closest("a"); if(!link) return; // If the target is in a ref-hint panel // (aka a link in the already-open one), // also just ignore it. if(link.closest(".ref-hint")) return; // Otherwise, show the panel for the link. showRefHint(link); } function hideAllHintsListener(e) { // If the click is inside a ref-hint panel, ignore it. if(e.target.closest(".ref-hint")) return; // Otherwise, close all the current panels. hideAllRefHints(); } document.addEventListener("DOMContentLoaded", () => { document.body.addEventListener("mousedown", showRefHintListener); document.body.addEventListener("focus", showRefHintListener); document.body.addEventListener("click", hideAllHintsListener); }); window.addEventListener("resize", () => { // Hide any open ref hint. hideAllRefHints(); }); } </script>