Skip to content

Commit eadad99

Browse files
committed
[css-overflow-3] Add example on nesting line-clamp
1 parent 4636392 commit eadad99

File tree

1 file changed

+39
-0
lines changed

1 file changed

+39
-0
lines changed

css-overflow-3/Overview.bs

+39
Original file line numberDiff line numberDiff line change
@@ -1042,6 +1042,45 @@ Forcing a Break After a Set Number of Lines: the 'max-lines' property</h3>
10421042
If fewer than <var>N</var> line boxes exist,
10431043
then 'max-lines' introduces no <a>region break</a>.
10441044

1045+
<div class=example>
1046+
As ''continue: discard'' does not cause the element to [=establish an independent formatting context=],
1047+
lines in a nested element with 'line-clamp' are counted,
1048+
as can be seen in the examples below.
1049+
<xmp highlight=markup>
1050+
<div id=a>
1051+
a: line 1<br>
1052+
a: line 2<br>
1053+
<div id=b>
1054+
b: line 1<br>
1055+
b: line 2<br>
1056+
b: line 3<br>
1057+
b: line 4<br>
1058+
</div>
1059+
a: line 3<br>
1060+
a: line 4<br>
1061+
</div>
1062+
</xmp>
1063+
Sample rendering given <code highlight=css>#a { line-clamp: 5; } b { line-clamp: 2; }</code>:
1064+
<pre>
1065+
a: line 1
1066+
a: line 2
1067+
b: line 1
1068+
b: line 2…
1069+
a: line 3…
1070+
</pre>
1071+
1072+
Sample rendering given <code highlight=css>#a { line-clamp: 3; } b { line-clamp: 2; }</code>:
1073+
<pre>
1074+
a: line 1
1075+
a: line 2
1076+
b: line 1…
1077+
</pre>
1078+
Note that in the second case,
1079+
the maximum of 2 lines set on element ''#b'' does not take effect,
1080+
since a forced break is introduced
1081+
before the second line of this element.
1082+
</div>
1083+
10451084
Note: This implies that 'max-lines' has no effect when applied to [=multi-column containers=],
10461085
since any line box they contain are nested into [=independent formatting contexts=].
10471086

0 commit comments

Comments
 (0)