Skip to content

Commit ca50889

Browse files
dbarondbaron
committed
Add one example.
1 parent b2f9bb2 commit ca50889

2 files changed

Lines changed: 113 additions & 0 deletions

File tree

‎css3-overflow/Overview.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,20 @@
1010
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
1111
type="text/css">
1212

13+
<style>
14+
.in-cards-demo {
15+
width: 13em;
16+
height: 8em;
17+
18+
padding: 4px;
19+
border: medium solid blue;
20+
margin: 6px;
21+
22+
font: medium/1.3 Times New Roman, Times, serif;
23+
white-space: nowrap;
24+
}
25+
</style>
26+
1327
<body>
1428
<div class=head> <!--begin-logo-->
1529
<p><a href="http://www.w3.org/"><img alt=W3C height=48
@@ -287,6 +301,56 @@ <h2 id=region-overflow><span class=secno>3. </span>Region overflow</h2>
287301
a constrained height), or should it work automatically for all elements
288302
even if they don't have ‘<code class=css>overflow: regions</code>’?
289303

304+
<div class=example>
305+
<table style="width: 100%">
306+
<tbody>
307+
<tr>
308+
<td>
309+
<pre>
310+
&lt;!DOCTYPE HTML&gt;
311+
&lt;title&gt;Breaking content into
312+
equal-sized cards&lt;/title&gt;
313+
&lt;style&gt;
314+
.in-cards {
315+
overflow: regions;
316+
317+
width: 13em;
318+
height: 8em;
319+
320+
padding: 4px;
321+
border: medium solid blue;
322+
margin: 6px;
323+
324+
font: medium/1.3 Times New
325+
Roman, Times, serif;
326+
}
327+
&lt;/style&gt;
328+
&lt;div class="in-cards"&gt;
329+
In this example, the text in the div
330+
is broken into a series of cards.
331+
These cards all have the same style.
332+
The presence of enough content to
333+
overflow one of the cards causes
334+
another one to be created. The second
335+
card is created just like it's the
336+
next sibling of the first.
337+
&lt;/div&gt;
338+
</pre>
339+
340+
<td>
341+
<div class=in-cards-demo>In this example, the text in the<br>
342+
div is broken into a series of<br>
343+
cards. These cards all have the<br>
344+
same style. The presence of<br>
345+
enough content to overflow<br>
346+
one of the cards causes another</div>
347+
348+
<div class=in-cards-demo>one to be created. The second<br>
349+
card is created just like it's the<br>
350+
next sibling of the first.</div>
351+
</table>
352+
</div>
353+
290354
<h3 id=region-styling><span class=secno>3.1. </span>Region styling</h3>
291355

292356
<h4 id=region-pseudo-element><span class=secno>3.1.1. </span>The

‎css3-overflow/Overview.src.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,19 @@
88
<link rel="stylesheet" type="text/css" href="../default.css">
99
<link rel="stylesheet" type="text/css"
1010
href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
11+
<style>
12+
.in-cards-demo {
13+
width: 13em;
14+
height: 8em;
15+
16+
padding: 4px;
17+
border: medium solid blue;
18+
margin: 6px;
19+
20+
font: medium/1.3 Times New Roman, Times, serif;
21+
white-space: nowrap;
22+
}
23+
</style>
1124
</head>
1225

1326
<div class="head">
@@ -195,6 +208,42 @@ <h2 id="region-overflow">Region overflow</h2>
195208
even if they don't have ''overflow: regions''?
196209
</p>
197210

211+
<div class="example">
212+
<table style="width: 100%"><tr><td><pre>
213+
&lt;!DOCTYPE HTML&gt;
214+
&lt;title&gt;Breaking content into
215+
equal-sized cards&lt;/title&gt;
216+
&lt;style&gt;
217+
.in-cards {
218+
overflow: regions;
219+
220+
width: 13em;
221+
height: 8em;
222+
223+
padding: 4px;
224+
border: medium solid blue;
225+
margin: 6px;
226+
227+
font: medium/1.3 Times New
228+
Roman, Times, serif;
229+
}
230+
&lt;/style&gt;
231+
&lt;div class="in-cards"&gt;
232+
In this example, the text in the div
233+
is broken into a series of cards.
234+
These cards all have the same style.
235+
The presence of enough content to
236+
overflow one of the cards causes
237+
another one to be created. The second
238+
card is created just like it's the
239+
next sibling of the first.
240+
&lt;/div&gt;
241+
</pre></td><td>
242+
<div class="in-cards-demo">In this example, the text in the<br>div is broken into a series of<br>cards. These cards all have the<br>same style. The presence of<br>enough content to overflow<br>one of the cards causes another</div>
243+
<div class="in-cards-demo">one to be created. The second<br>card is created just like it's the<br>next sibling of the first.</div>
244+
</td></tr></table>
245+
</div>
246+
198247
<h3 id="region-styling">Region styling</h3>
199248

200249
<h4 id="region-pseudo-element">The ::nth-region() pseudo-element</h4>

0 commit comments

Comments
 (0)