@@ -17,7 +17,8 @@ Abstract: This module contains the features of CSS relating to scrollable overfl
17
17
!Change Log : <a href="https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.src.html">from 28 March 2013 to 27 January 2015</a>
18
18
!Change Log : <a href="https://hg.csswg.org/drafts/log/tip/css3-overflow/Overview.src.html">from 31 July 2012 to 27 March 2013</a>
19
19
Ignored Vars : B, P
20
- Ignored Terms : padding edge
20
+ Ignored Terms : padding edge, viewport, line box, flex order
21
+ At Risk : the 'max-lines' property
21
22
Status Text : <strong>This update trims away most of the experimental new ideas
22
23
for handling overflow that were described in the <a href="https://www.w3.org/TR/2013/WD-css-overflow-3-20130418/">previous Working Draft</a>.
23
24
These ideas are not abandoned; they are merely <a href="https://drafts.csswg.org/css-overflow/">deferred until Level 4</a>.</strong>
@@ -30,9 +31,9 @@ Status Text: <strong>This update trims away most of the experimental new ideas
30
31
<!-- - Abstract has the most introductory sentence last -->
31
32
<!-- FIXME: other bikeshed issues -->
32
33
<pre class="link-defaults">
33
- spec:css-transforms-1 ; type:property; text:transform-style
34
+ spec:css-transforms-2 ; type:property; text:transform-style
34
35
type: dfn; spec:css-multicol-1; text:overflow column
35
- type: dfn; spec:css-transforms-1 ; text:3d rendering context
36
+ type: dfn; spec:css-transforms-2 ; text:3d rendering context
36
37
</pre>
37
38
<!-- FIXME: the break-* link doesn't actually work! -->
38
39
<pre class="anchors">
@@ -432,21 +433,67 @@ Scrolling Origin, Direction, and Restriction</h3>
432
433
<h2 id="max-lines">
433
434
Limiting Number of Visible Text Lines: the 'max-lines' property</h2>
434
435
435
-
436
436
<pre class=propdef>
437
437
Name : max-lines
438
438
Value : none | <<integer>>
439
439
Initial : none
440
- Applies to : all non-inline elements
440
+ Applies to : <a>block containers</a> (excluding <a>multi-column containers</a>)
441
441
Inherited : no
442
442
Animatable : as integer
443
443
Percentages : N/A
444
444
Media : visual
445
445
Computed value : specified value
446
446
</pre>
447
447
448
- Issue: Add back 'max-lines' , so we can kill the unspecified WebKit feature that does this poorly.
448
+ This property allows limiting the contents of a block container
449
+ to the specified number of lines;
450
+ remaining content is fragmented away
451
+ and neither rendered nor measured.
452
+ Specifically,
449
453
454
+ <ul>
455
+ <li> The box becomes a <a>fragmentation container</a>
456
+ that captures <a>region breaks</a> .
457
+
458
+ <li> A <a>region break</a> [[!CSS-BREAK-3]]
459
+ is forced after its <var> N</var> th
460
+ descendant <a>in-flow</a> <a>line box</a> ,
461
+ where <var> N</var> is the specified value of 'max-lines' .
462
+ For this purpose,
463
+ line boxes are counted in
464
+ <span class="issue"> <a>document order</a> OR
465
+ visual order
466
+ (<a>grid order</a> in <a>grid containers</a> ,
467
+ <a>flex order</a> in <a>flex containers</a> ,
468
+ and <a>document order</a> in all other <a>display types</a> )</span> .
469
+
470
+ If fewer than <var> N</var> line boxes exist,
471
+ then 'max-lines' introduces no <a>region break</a> .
472
+
473
+ <li> The position of the first forced <a>region break</a>
474
+ (whether imposed by 'max-lines' or by another mechanism,
475
+ such as the 'break-before' /'break-after' properties)
476
+ is treated as the end of the <a>fragmentation container</a> ,
477
+ and the rest of the <a>fragmented flow</a> is discarded,
478
+ as if it were ''display: none'' :
479
+ it is neither rendered,
480
+ nor measured as part of the box’s contents for the purpose of
481
+ finding its <a lt="min-content size">min-content</a> and <a>max-content sizes</a> ,
482
+ nor does allow user interaction.
483
+
484
+ Note: In the case of <a href="https://www.w3.org/TR/css-break-3/#parallel-flows">parallel fragmentation flows</a> ,
485
+ content occuring after the <a>fragmentation break</a> in the box tree
486
+ could still be rendered,
487
+ if it is laid out above the position
488
+ representing the end of this <a>fragmentation container</a> .
489
+
490
+ <!-- Honoring forced breaks from other sources
491
+ is to handle future use cases,
492
+ such as using 'max-lines' to size the first region
493
+ in a two-region section,
494
+ where the first region is for styling the first N lines of the article
495
+ differently from the rest. -->
496
+ </ul>
450
497
451
498
<h2 id="static-media">
452
499
Overflow in static media</h2>
0 commit comments