@@ -131,6 +131,22 @@ url: https://drafts.csswg.org/selectors-3/#subject; type: dfn; text: subject;
131
131
<h2 id="intro">
132
132
Introduction</h2>
133
133
134
+ This specification extends [[!CSS-OVERFLOW-3]] .
135
+ It contains several primary sections:
136
+
137
+ : [[#overflow-properties|Overflow Scrolling and Clipping Controls]]
138
+ ::
139
+ This section defines relatively simple extensions to the 'overflow-*' properties [[css-overflow-3#overflow-properties|in Level 3]] .
140
+
141
+ : [[#auto-ellipsis|Automatic Ellipses]] .
142
+ ::
143
+ This section defines some experimental extensions to the '*-ellipsis' properties [[css-overflow-3#auto-ellipsis|in Level 3]] .
144
+
145
+ : [[#fragmentation|Redirection of Overflow]]
146
+ ::
147
+ This section definse a highly experimental, exploratory new model
148
+ for handling overflow by redirecting it into newly-generated [=fragmentation containers=] .
149
+
134
150
Note: At the time of writing, [[CSS-OVERFLOW-3]] is not completely finalized yet.
135
151
To avoid accidental divergences and maintenance overhead,
136
152
This specification is written as a delta specification over css-overflow Level 3.
@@ -139,63 +155,6 @@ its content will be integrated into this specification,
139
155
which will then replace it.
140
156
Until then, this specification only contains additions and extensions to level 3.
141
157
142
- <p>
143
- In CSS Level 1 [[CSS1]] , placing more content than would fit
144
- inside an element with a specified size
145
- was generally an authoring error.
146
- Doing so caused the content to extend
147
- outside the bounds of the element,
148
- which would likely cause
149
- that content to overlap with other elements.
150
- </p>
151
-
152
- <p>
153
- CSS Level 2 [[CSS2]] introduced the 'overflow' property,
154
- which allows authors to have overflow be handled by scrolling,
155
- which means it is no longer an authoring error.
156
- It also allows authors to specify
157
- that overflow is handled by clipping,
158
- which makes sense when the author's intent
159
- is that the content not be shown.
160
- This was further refined in the CSS Overflow Module Level 3 [[CSS-OVERFLOW-3]] .
161
- </p>
162
-
163
- <p>
164
- However, scrolling is not the only way
165
- to present large amounts of content,
166
- and may even not be the optimal way.
167
- After all, the codex replaced the scroll
168
- as the common format for large written works
169
- because of its advantages.
170
- </p>
171
-
172
- <p>
173
- This specification introduces
174
- a mechanism for Web pages to specify
175
- that an element of a page should handle overflow
176
- through pagination rather than through scrolling.
177
- </p>
178
-
179
- <p>
180
- This specification also extends the concept of overflow
181
- in another direction.
182
- Instead of requiring that authors specify a single area
183
- into which the content of an element must flow,
184
- this specification allows authors to specify multiple fragments,
185
- each with their own dimensions and styles,
186
- so that the content of the element can flow from one to the next,
187
- using as many as needed to place the content without overflowing.
188
- </p>
189
-
190
- <p>
191
- In both of these cases, implementations must
192
- break the content in the block-progression dimension.
193
- Implementations must do this is described
194
- in the CSS Fragmentation Module [[!CSS3-BREAK]] .
195
- </p>
196
-
197
- <p> The definition of the 'text-overflow' property in this module supersedes the one in [[CSS-UI-3]] and [[CSS-OVERFLOW-3]] .</p>
198
-
199
158
<h3 id="values">
200
159
Value Definitions</h3>
201
160
@@ -214,17 +173,22 @@ Module Interactions</h3>
214
173
215
174
This module extends features defined in [[!CSS-OVERFLOW-3]] .
216
175
217
- <h2 id="overflow-concepts">Types of overflow</h2>
176
+ <h2 id="overflow-concepts">
177
+ Overflow Concepts and Terminology</h2>
218
178
219
- Issue: copy level 3 content when final
179
+ Issue: Copy [[css-overflow-3#overflow-concepts|Level 3 content]] when final.
220
180
221
181
222
- <h2 id="overflow-properties">Overflow properties</h2>
182
+ <h2 id="overflow-properties">
183
+ Scrolling and Clipping Overflow</h2>
223
184
224
- Issue: copy level 3 content when final
185
+ Issue: Copy [[css-overflow-3#overflow-properties|Level 3 content]] when final.
225
186
187
+ <h2 id="auto-ellipsis">
188
+ Automatic Ellipses</h2>
226
189
227
- <h2 id="text-overflow" caniuse="text-overflow">Overflow Ellipsis: the 'text-overflow' property</h2>
190
+ <h3 id="text-overflow" caniuse="text-overflow">
191
+ Inline Overflow Ellipsis: the 'text-overflow' property</h3>
228
192
229
193
<pre class="propdef">
230
194
Name : text-overflow
@@ -237,6 +201,8 @@ Computed value: as specified, with lengths made absolute
237
201
Animation type : by computed value type
238
202
</pre>
239
203
204
+ ISSUE: This section might need to be re-synced against [[CSS-OVERFLOW-3]] .
205
+
240
206
This property specifies rendering when inline content overflows
241
207
its line box edge
242
208
in the inline progression direction of its block container element ("the block")
@@ -630,7 +596,68 @@ If there is insufficient space for both start
630
596
and end ellipses/strings,
631
597
then only the end ellipsis/string should be rendered.
632
598
633
- <h2 id="fragmentation">Fragmentation of overflow</h2>
599
+ <h2 id="fragmentation">
600
+ Redirection of Overflow</h2>
601
+
602
+ ISSUE: This section is highly experimental.
603
+
604
+ <p>
605
+ In CSS Level 1 [[CSS1]] , placing more content than would fit
606
+ inside an element with a specified size
607
+ was generally an authoring error.
608
+ Doing so caused the content to extend
609
+ outside the bounds of the element,
610
+ which would likely cause
611
+ that content to overlap with other elements.
612
+ </p>
613
+
614
+ <p>
615
+ CSS Level 2 [[CSS2]] introduced the 'overflow' property,
616
+ which allows authors to have overflow be handled by scrolling,
617
+ which means it is no longer an authoring error.
618
+ It also allows authors to specify
619
+ that overflow is handled by clipping,
620
+ which makes sense when the author's intent
621
+ is that the content not be shown.
622
+ This was further refined in the CSS Overflow Module Level 3 [[CSS-OVERFLOW-3]] .
623
+ </p>
624
+
625
+ <p>
626
+ However, scrolling is not the only way
627
+ to present large amounts of content,
628
+ and may even not be the optimal way.
629
+ After all, the codex replaced the scroll
630
+ as the common format for large written works
631
+ because of its advantages.
632
+ </p>
633
+
634
+ <p>
635
+ This specification introduces
636
+ a mechanism for Web pages to specify
637
+ that an element of a page should handle overflow
638
+ through pagination rather than through scrolling.
639
+ </p>
640
+
641
+ <p>
642
+ This specification also extends the concept of overflow
643
+ in another direction.
644
+ Instead of requiring that authors specify a single area
645
+ into which the content of an element must flow,
646
+ this specification allows authors to specify multiple fragments,
647
+ each with their own dimensions and styles,
648
+ so that the content of the element can flow from one to the next,
649
+ using as many as needed to place the content without overflowing.
650
+ </p>
651
+
652
+ <p>
653
+ In both of these cases, implementations must
654
+ break the content in the block-progression dimension.
655
+ Implementations must do this is described
656
+ in the CSS Fragmentation Module [[!CSS3-BREAK]] .
657
+ </p>
658
+
659
+ <h3 id="continue">
660
+ Channeling Overflow: the 'continue' property</h3>
634
661
635
662
The 'continue' property gives authors the ability
636
663
to request that content that does not fit inside an element
@@ -734,7 +761,8 @@ Note: For background discussions leading to this property, see these threads:
734
761
<a href="http://lists.w3.org/Archives/Public/www-style/2012May/1197.html">discussion of overflow, overflow-x, overflow-y and overflow-style</a> and
735
762
<a href="https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html">proposal for a fragmentation property</a>
736
763
737
- <h2 id="paginated-overflow">Paginated overflow</h2>
764
+ <h3 id="paginated-overflow">
765
+ Paginated overflow</h3>
738
766
739
767
This section introduces and defines the meaning of the ''continue/paginate'' value of the 'continue' property.
740
768
@@ -788,7 +816,8 @@ fragment overflow, which also deals with displaying multiple pages.
788
816
or the 'continue' property as described here.
789
817
</p>
790
818
791
- <h2 id="fragment-overflow">Fragment overflow</h2>
819
+ <h3 id="fragment-overflow">
820
+ Fragmented Overflow</h2>
792
821
793
822
This section introduces and defines the meaning of
794
823
the ''continue/fragments'' value of the 'continue' property.
0 commit comments