Skip to content

Commit 013e7b9

Browse files
tabatkinstabatkins
committed
[css-overflow-3] Clean intro, add back max-lines skeleton.
1 parent f6fb21a commit 013e7b9

2 files changed

Lines changed: 99 additions & 272 deletions

File tree

‎css-overflow-3/Overview.bs‎

Lines changed: 40 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ TR: http://www.w3.org/TR/css-overflow-3/
1010
Previous version: http://www.w3.org/TR/2013/WD-css-overflow-3-20130418/
1111
Editor: L. David Baron, Mozilla, http://dbaron.org/
1212
Editor: Florian Rivoal, Invited Expert, florian@rivoal.net, http://florian.rivoal.net
13-
Abstract: This module contains the features of CSS relating to new mechanisms of overflow handling in visual media (e.g., screen or paper). In interactive media, it describes features that allow the overflow from a fixed size container to be handled by pagination (displaying one page at a time). It also describes features, applying to all visual media, that allow the contents of an element to be spread across multiple fragments, allowing the contents to flow across multiple regions or to have different styles for different fragments.
13+
Abstract: This module contains the features of CSS relating to scrollable overflow handling in visual media.
1414
!Change Log: <a href="https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.bs">from 27 January 2015 to the present</a>
1515
!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>
1616
!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>
@@ -28,166 +28,40 @@ type: dfn; spec:css-multicol-1; text:overflow column
2828
<pre class="anchors">
2929
url: http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style; type: property; text: overflow-style;
3030
</pre>
31-
<style>
32-
table.source-demo-pair {
33-
width: 100%;
34-
}
35-
36-
.in-cards-demo {
37-
width: 13em;
38-
height: 8em;
39-
40-
padding: 4px;
41-
border: medium solid blue;
42-
margin: 6px;
43-
44-
font: medium/1.3 Times New Roman, Times, serif;
45-
white-space: nowrap;
46-
}
47-
48-
.bouncy-columns-demo {
49-
width: 6em;
50-
height: 10em;
51-
float: left;
52-
margin: 1em;
53-
font: medium/1.25 Times New Roman, Times, serif;
54-
white-space: nowrap;
55-
}
56-
.bouncy-columns-demo.one {
57-
background: aqua; color: black;
58-
transform: rotate(-3deg);
59-
}
60-
.bouncy-columns-demo.two {
61-
background: yellow; color: black;
62-
transform: rotate(3deg);
63-
}
64-
65-
.article-font-inherit-demo {
66-
font: 1em/1.25 Times New Roman, Times, serif;
67-
white-space: nowrap;
68-
}
69-
.article-font-inherit-demo.one {
70-
width: 12em;
71-
font-size: 1.5em;
72-
margin-bottom: 1em;
73-
height: 4em;
74-
}
75-
.article-font-inherit-demo.two {
76-
width: 11em;
77-
margin-left: 5em;
78-
margin-right: 2em;
79-
}
80-
81-
.dark-columns-demo {
82-
width: 6em;
83-
height: 10em;
84-
float: left;
85-
margin-right: 1em;
86-
font: medium/1.25 Times New Roman, Times, serif;
87-
white-space: nowrap;
88-
}
89-
.dark-columns-demo.one {
90-
background: aqua; color: black;
91-
}
92-
.dark-columns-demo.one :link {
93-
color: blue;
94-
}
95-
.dark-columns-demo.one :visited {
96-
color: purple;
97-
}
98-
.dark-columns-demo.two {
99-
background: navy; color: white;
100-
}
101-
.dark-columns-demo.two :link {
102-
color: aqua;
103-
}
104-
.dark-columns-demo.two :visited {
105-
color: fuchsia;
106-
}
107-
108-
.article-max-lines-demo {
109-
font: 1em/1.25 Times New Roman, Times, serif;
110-
white-space: nowrap;
111-
}
112-
.article-max-lines-demo.one::first-letter {
113-
font-size: 2em;
114-
line-height: 0.9;
115-
}
116-
.article-max-lines-demo.one {
117-
font-size: 1.5em;
118-
width: 16em;
119-
}
120-
.article-max-lines-demo.two {
121-
width: 11.5em;
122-
float: left; margin-right: 1em;
123-
}
124-
.article-max-lines-demo.three {
125-
width: 11.5em;
126-
float: left;
127-
}
128-
</style>
129-
130-
<p>
131-
</p>
13231

13332
<h2 id="intro">
13433
Introduction</h2>
13534

136-
<p>
13735
In CSS Level 1 [[CSS1]], placing more content than would fit
13836
inside an element with a specified size
13937
was generally an authoring error.
14038
Doing so caused the content to extend
14139
outside the bounds of the element,
14240
which would likely cause
14341
that content to overlap with other elements.
144-
</p>
14542

146-
<p>
14743
CSS Level 2 [[CSS21]] introduced the 'overflow' property,
14844
which allows authors to have overflow be handled by scrolling,
14945
which means it is no longer an authoring error.
15046
It also allows authors to specify
15147
that overflow is handled by clipping,
15248
which makes sense when the author's intent
15349
is that the content not be shown.
154-
</p>
155-
156-
<p>
157-
However, scrolling is not the only way
158-
to present large amounts of content,
159-
and may even not be the optimal way.
160-
After all, the codex replaced the scroll
161-
as the common format for large written works
162-
because of its advantages.
163-
</p>
164-
165-
<p>
166-
This specification introduces
167-
a mechanism for Web pages to specify
168-
that an element of a page should handle overflow
169-
through pagination rather than through scrolling.
170-
</p>
17150

172-
<p>
173-
This specification also extends the concept of overflow
174-
in another direction.
175-
Instead of requiring that authors specify a single area
176-
into which the content of an element must flow,
177-
this specification allows authors to specify multiple fragments,
178-
each with their own dimensions and styles,
179-
so that the content of the element can flow from one to the next,
180-
using as many as needed to place the content without overflowing.
181-
</p>
51+
This specification introduces the long-standing de-facto 'overflow-x' and 'overflow-y' properties,
52+
and defined overflow handling more fully.
18253

183-
<p>
184-
In both of these cases, implementations must
185-
break the content in the block-progression dimension.
186-
Implementations must do this is described
187-
in the CSS Fragmentation Module [[!CSS3-BREAK]].
188-
</p>
54+
Something something 'max-lines'.
18955

190-
<!-- Big Text: types -->
56+
<!--
57+
████████ ██ ██ ████████ ████████ ██████
58+
██ ██ ██ ██ ██ ██ ██ ██
59+
██ ████ ██ ██ ██ ██
60+
██ ██ ████████ ██████ ██████
61+
██ ██ ██ ██ ██
62+
██ ██ ██ ██ ██ ██
63+
██ ██ ██ ████████ ██████
64+
-->
19165

19266
<h2 id="overflow-concepts">Types of overflow</h2>
19367

@@ -366,7 +240,15 @@ Introduction</h2>
366240
in other coordinate systems due to transforms [[CSS3-TRANSFORMS]].
367241
</p>
368242

369-
<!-- Big Text: overflow-* -->
243+
<!--
244+
███████ ██ ██ ████████ ████████ ████████ ██ ███████ ██ ██
245+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
246+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
247+
██ ██ ██ ██ ██████ ████████ ██████ ██ ██ ██ ██ ██ ██ ███████ █████████
248+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
249+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
250+
███████ ███ ████████ ██ ██ ██ ████████ ███████ ███ ███
251+
-->
370252

371253
<h2 id="overflow-properties">Overflow properties</h2>
372254

@@ -525,6 +407,24 @@ Introduction</h2>
525407
'overflow-x' and 'overflow-y' instead?
526408
</p>
527409

410+
<h2 id="max-lines">
411+
Limiting Number of Visible Text Lines: the 'max-lines' property</h2>
412+
413+
414+
<pre class=propdef>
415+
Name: max-lines
416+
Value: none | <<integer>>
417+
Initial: none
418+
Applies to: all non-inline elements
419+
Inherited: no
420+
Animatable: as integer
421+
Percentages: N/A
422+
Media: visual
423+
Computed value: specified value
424+
</pre>
425+
426+
Issue: Add back 'max-lines', so we can kill the unspecified WebKit feature that does this poorly.
427+
528428

529429
<h2 id="static-media">Overflow in static media</h2>
530430

0 commit comments

Comments
 (0)