Skip to content

Commit 91d7ea3

Browse files
dbarondbaron
committed
'max-lines' example.
1 parent 82f4672 commit 91d7ea3

2 files changed

Lines changed: 122 additions & 4 deletions

File tree

‎css3-overflow/Overview.html‎

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,27 @@
4141
background: yellow; color: black;
4242
transform: rotate(3deg);
4343
}
44+
45+
.article-max-lines-demo {
46+
font: 1em/1.25 Times New Roman, Times, serif;
47+
white-space: nowrap;
48+
}
49+
.article-max-lines-demo.one::first-letter {
50+
font-size: 2em;
51+
line-height: 0.9;
52+
}
53+
.article-max-lines-demo.one {
54+
font-size: 1.5em;
55+
width: 16em;
56+
}
57+
.article-max-lines-demo.two {
58+
width: 11.5em;
59+
float: left; margin-right: 1em;
60+
}
61+
.article-max-lines-demo.three {
62+
width: 11.5em;
63+
float: left;
64+
}
4465
</style>
4566

4667
<body>
@@ -648,7 +669,59 @@ <h3 id=max-lines><span class=secno>3.2. </span>The ‘<a
648669
<p class=issue>Should this apply to regions overflow only, or also to
649670
pagination?
650671

651-
<p class=issue> TODO: ADD EXAMPLE HERE.
672+
<div class=example>
673+
<table class=source-demo-pair>
674+
<tbody>
675+
<tr>
676+
<td>
677+
<pre>&lt;!DOCTYPE HTML&gt;
678+
&lt;style&gt;
679+
.article {
680+
overflow: regions;
681+
}
682+
.article::first-letter {
683+
font-size: 2em;
684+
line-height: 0.9;
685+
}
686+
.article::nth-region(1) {
687+
font-size: 1.5em;
688+
max-lines: 3;
689+
}
690+
.article::nth-region(n+2) {
691+
/* 2 and up */
692+
column-count: 2;
693+
}
694+
&lt;/style&gt;
695+
&lt;div class="article"&gt;
696+
<i>...</i>
697+
&lt;/div&gt;</pre>
698+
699+
<td>
700+
<div class="article-max-lines-demo one">The max-lines property
701+
allows<br>
702+
authors to use a larger font for the first<br>
703+
few lines of an article. Without the</div>
704+
705+
<div class="article-max-lines-demo two">max-lines property,
706+
authors<br>
707+
might have to use the<br>
708+
‘<code class=property>height</code>’ property instead, but<br>
709+
that would leave a slight gap<br>
710+
if the author miscalculated<br>
711+
how much height a given<br>
712+
number of lines would<br>
713+
occupy (which might be</div>
714+
715+
<div class="article-max-lines-demo three">particularly hard if the
716+
author<br>
717+
didn't know what text would<br>
718+
be filling the space, exactly<br>
719+
what font would be used, or<br>
720+
exactly which platform's font<br>
721+
rendering would be used to<br>
722+
display the font).</div>
723+
</table>
724+
</div>
652725

653726
<h2 id=conformance><span class=secno>4. </span> Conformance</h2>
654727

‎css3-overflow/Overview.src.html‎

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,27 @@
3939
background: yellow; color: black;
4040
transform: rotate(3deg);
4141
}
42+
43+
.article-max-lines-demo {
44+
font: 1em/1.25 Times New Roman, Times, serif;
45+
white-space: nowrap;
46+
}
47+
.article-max-lines-demo.one::first-letter {
48+
font-size: 2em;
49+
line-height: 0.9;
50+
}
51+
.article-max-lines-demo.one {
52+
font-size: 1.5em;
53+
width: 16em;
54+
}
55+
.article-max-lines-demo.two {
56+
width: 11.5em;
57+
float: left; margin-right: 1em;
58+
}
59+
.article-max-lines-demo.three {
60+
width: 11.5em;
61+
float: left;
62+
}
4263
</style>
4364
</head>
4465

@@ -544,9 +565,33 @@ <h3 id="max-lines">The 'max-lines' property</h3>
544565
<p class="issue">Should this apply to regions overflow only, or also
545566
to pagination?</p>
546567

547-
<p class="issue">
548-
TODO: ADD EXAMPLE HERE.
549-
</p>
568+
<div class="example">
569+
<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
570+
&lt;style&gt;
571+
.article {
572+
overflow: regions;
573+
}
574+
.article::first-letter {
575+
font-size: 2em;
576+
line-height: 0.9;
577+
}
578+
.article::nth-region(1) {
579+
font-size: 1.5em;
580+
max-lines: 3;
581+
}
582+
.article::nth-region(n+2) {
583+
/* 2 and up */
584+
column-count: 2;
585+
}
586+
&lt;/style&gt;
587+
&lt;div class="article"&gt;
588+
<i>...</i>
589+
&lt;/div&gt;</pre></td><td>
590+
<div class="article-max-lines-demo one">The max-lines property allows<br>authors to use a larger font for the first<br>few lines of an article. Without the</div>
591+
<div class="article-max-lines-demo two">max-lines property, authors<br>might have to use the<br>'height' property instead, but<br>that would leave a slight gap<br>if the author miscalculated<br>how much height a given<br>number of lines would<br>occupy (which might be</div>
592+
<div class="article-max-lines-demo three">particularly hard if the author<br>didn't know what text would<br>be filling the space, exactly<br>what font would be used, or<br>exactly which platform's font<br>rendering would be used to<br>display the font).</div>
593+
</td></tr></table>
594+
</div>
550595

551596
<h2 id="conformance">
552597
Conformance</h2>

0 commit comments

Comments
 (0)