FFFF [css-ui][css-overflow] Move text-overflow from css-ui to css-overflow · simonwuelker/csswg-drafts@4510983 · GitHub
Skip to content

Commit 4510983

Browse files
frivoalfrivoal
committed
[css-ui][css-overflow] Move text-overflow from css-ui to css-overflow
This means copying it from CSS-UI-3 (a REC) to css-overflow-3, and moving it from css-ui-4 to css-overflow-4. This is done to keep the definitions of text-overflow and block-overflow together. Closes w3c#2745
1 parent 1dc6157 commit 4510983

12 files changed

Lines changed: 742 additions & 408 deletions

File tree

‎css-overflow-3/Overview.bs‎

Lines changed: 296 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,20 @@ Status Text: <strong>This update trims away most of the experimental new ideas
3434
spec:css-transforms-2; type:property; text:transform-style
3535
type: dfn; spec:css-multicol-1; text:overflow column
3636
type: dfn; spec:css-transforms-2; text:3d rendering context
37+
spec:css-writing-modes-4; type:dfn; text:end
3738
</pre>
3839
<!-- FIXME: the break-* link doesn't actually work! -->
3940
<pre class="anchors">
4041
url: https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style; type: property; text: overflow-style;
4142
</pre>
43+
<style>
44+
.awesome-table td { padding: 5px; }
45+
.awesome-table {
46+
color: #000;
47+
background: #fff;
48+
margin: auto;
49+
}
50+
</style>
4251

4352
<h2 id="intro">
4453
Introduction</h2>
@@ -65,6 +74,11 @@ Introduction</h2>
6574

6675
[Something something 'max-lines'.]
6776

77+
Note: This specification also reproduces the definition of the 'text-overflow' property
78+
previously defined in [[CSS-UI-3]],
79+
with no addition or modification,
80+
in order to present 'text-overflow' and 'block-overflow' toghether.
81+
6882
<!--
6983
████████ ██ ██ ████████ ████████ ██████
7084
██ ██ ██ ██ ██ ██ ██ ██
@@ -488,6 +502,288 @@ as the Flow-Relative box model properties defined in [[css-logical-1#box]].
488502
'overflow-x' and 'overflow-y' properties.
489503
The mapping depends on the element's 'writing-mode'.
490504

505+
<h2 id="text-overflow" caniuse="text-overflow">
506+
Overflow Ellipsis: the 'text-overflow' property</h2>
507+
508+
<pre class="propdef">
509+
Name: text-overflow
510+
Value: clip | ellipsis
511+
Initial: clip
512+
Applies to: block containers
513+
Inherited: no
514+
Percentages: N/A
515+
Media: visual
516+
Computed value: as specified
517+
</pre>
518+
519+
This property specifies rendering when inline content overflows
520+
its <a>end</a> line box edge
521+
in the inline progression direction of its block container element ("the block")
522+
that has 'overflow'
523+
other than ''visible''.
524+
525+
Text can overflow for example when it is prevented from wrapping
526+
(e.g. due to <code class="lang-css">white-space: nowrap</code>
527+
or a single word is too long to fit).
528+
Values have the following meanings:
529+
530+
<dl data-dfn-for="text-overflow" class="valuedef">
531+
<dt><dfn id=overflow-clip dfn-type=value>clip</dfn></dt>
532+
<dd>Clip inline content that overflows its block container element. Characters may be only partially rendered.</dd>
533+
534+
<dt><dfn id=overflow-ellipsis dfn-type=value>ellipsis</dfn></dt>
535+
<dd>
536+
Render an ellipsis character (U+2026)
537+
to represent clipped inline content.
538+
Implementations may substitute a more language, script, or writing-mode appropriate
539+
ellipsis character,
540+
or three dots "..." if the ellipsis character is unavailable.
541+
</dd>
542+
</dl>
543+
544+
The term "character" is used in this property definition
545+
for better readability and means "grapheme cluster" [[!UAX29]]
546+
for implementation purposes.
547+
548+
For the ellipsis value
549+
implementations must hide characters and
550+
<a href="https://www.w3.org/TR/CSS2/visuren.html#inline-boxes">
551+
atomic inline-level elements</a>
552+
at the <a>end</a> edge of the line as necessary to fit the ellipsis, and
553+
place the ellipsis immediately adjacent
554+
to the <a>end</a> edge of the remaining inline content.
555+
The first character or
556+
<a href="https://www.w3.org/TR/CSS2/visuren.html#inline-boxes">
557+
atomic inline-level element</a>
558+
on a line
559+
must be clipped rather than ellipsed.
560+
561+
<div class=example>
562+
<h3 id="bidi-ellipsis" class="no-num no-toc">Bidi ellipsis examples</h3>
563+
These examples demonstrate which characters get hidden
564+
to make room for the ellipsis in a bidi situation:
565+
those visually at the end edge of the line.
566+
567+
Sample CSS:
568+
<pre><code highlight=css>
569+
div {
570+
font-family: monospace;
571+
white-space: pre;
572+
overflow: hidden;
573+
width: 9ch;
574+
text-overflow: ellipsis;
575+
}
576+
</code></pre>
577+
578+
Sample HTML fragments, renderings, and your browser:
579+
<table class="awesome-table data">
580+
<thead><th>HTML<th>Reference rendering<th>Your Browser</thead>
581+
<tr>
582+
<td><code highlight=html>&ltdiv>שלום 123456&lt;/div></code><td><div style="font-family:monospace">123456 ם…</div><td><div style="font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis">שלום 123456</div>
583+
<tr><td><code highlight=html>&ltdiv dir=rtl>שלום 123456&lt;/div></code><td><div style="font-family:monospace">…456 שלום</div><td><div style="font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis" dir=rtl>שלום 123456</div>
584+
585+
</table>
586+
587+
588+
</div>
589+
590+
<h3 id="ellipsing-details" class="no-num no-toc">ellipsing details</h3>
591+
<ul>
592+
<li>
593+
Ellipsing only affects rendering and must not affect layout
594+
nor dispatching of pointer events:
595+
The UA should dispatch any pointer event on the ellipsis to the elided element,
596+
as if 'text-overflow' had been ''text-overflow/none''.
597+
<li>
598+
The ellipsis is styled and baseline-aligned according to
599+
the block.
600+
<li>
601+
Ellipsing occurs after relative positioning and other graphical transformations.
602+
<li>
603+
If there is insufficient space for the ellipsis,
604+
then clip the rendering of the ellipsis itself
605+
(on the same side that neutral characters on the line
606+
would have otherwise been clipped with the ''text-overflow:clip'' value).
607+
</ul>
608+
609+
<h3 id="ellipsis-interaction" class="no-num no-toc">user interaction with ellipsis</h3>
610+
<ul>
611+
<li>When the user is interacting with content
612+
(e.g. editing, selecting, scrolling),
613+
the user agent may treat ''text-overflow: ellipsis'' as ''text-overflow: clip''.
614+
615+
<li>Selecting the ellipsis should select the ellipsed text.
616+
If all of the ellipsed text is selected,
617+
UAs should show selection of the ellipsis.
618+
Behavior of partially-selected ellipsed text is up to the UA.
619+
620+
</ul>
621+
622+
<div class="example"><p style="display:none">Example(s):
623+
<h3 id="text-overflow-examples" class="no-num no-toc">text-overflow examples</h3>
624+
625+
These examples demonstrate setting the text-overflow of a block container element
626+
that has text which overflows its dimensions:
627+
628+
sample CSS for a div:
629+
<pre><code class="lang-css">div {
630+
font-family:Helvetica,sans-serif; line-height:1.1;
631+
width:3.1em; padding:.2em; border:solid .1em black; margin:1em 0;
632+
}</code></pre>
633+
634+
sample HTML fragments, renderings, and your browser:
635+
<table class="awesome-table"><tbody>
636+
<tr><th>HTML</th><th>sample rendering</th><th>your browser</th></tr>
637+
<tr>
638+
<td><pre><code class="lang-markup">&lt;div&gt;
639+
CSS IS AWESOME, YES
640+
&lt;/div&gt;
641+
</code></pre></td>
642+
643+
644+
<td>
645+
<object type="image/png" data="images/cssisawesome.png">
646+
First, a box with text drawing outside of it.
647+
</object>
648+
</td>
649+
650+
<td>
651+
<div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1;">CSS IS AWESOME, YES</div>
652+
</td>
653+
</tr>
654+
655+
<tr>
656+
<td><pre><code class="lang-markup">&lt;div style="<strong>text-overflow:clip;</strong> overflow:hidden"&gt;
657+
CSS IS AWESOME, YES
658+
&lt;/div&gt;
659+
</code></pre></td>
660+
661+
<td>
662+
<object type="image/png" data="images/cssisaweso.png">
663+
Second, a similar box with the text clipped outside the box.
664+
</object 9E70 ></td>
665+
666+
<td>
667+
<div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:clip;">CSS IS AWESOME, YES</div>
668+
</td>
669+
</tr>
670+
671+
<tr>
672+
<td><pre><code class="lang-markup">&lt;div style="<strong>text-overflow:ellipsis;</strong> overflow:hidden"&gt;
673+
CSS IS AWESOME, YES
674+
&lt;/div&gt;
675+
</code></pre></td>
676+
677+
<td>
678+
<object type="image/png" data="images/cssisaw.png">
679+
Third, a similar box with an ellipsis representing the clipped text.
680+
</object>
681+
</td>
682+
683+
<td>
684+
<div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:ellipsis;">CSS IS AWESOME, YES</div>
685+
</td>
686+
</tr>
687+
688+
689+
<tr>
690+
<td><pre><code class="lang-markup">&lt;div style="<strong>text-overflow:ellipsis;</strong> overflow:hidden"&gt;
691+
NESTED
692+
&lt;p&gt;PARAGRAPH&lt;/p&gt;
693+
WON'T ELLIPSE.
694+
&lt;/div&gt;
695+
</code></pre></td>
696+
697+
<td>
698+
<object type="image/png" data="images/nes.png">
699+
Fourth, a box with a nested paragraph demonstrating anonymous block boxes equivalency and non-inheritance into a nested element.
700+
</object>
701+
</td>
702+
703+
<td>
704+
<div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:ellipsis;">NESTED
705+
<p>PARAGRAPH</p>
706+
WON'T ELLIPSE.</div>
707+
</td>
708+
709+
</tr>
710+
</tbody></table>
711+
< 8096 /code>712+
</div>
713+
714+
Note: the side of the line that the ellipsis is placed depends on the 'direction' of the block.
715+
E.g. an overflow hidden right-to-left
716+
(<code class="lang-css">direction: rtl</code>)
717+
block clips inline content on the <a spec=css-writing-modes-3>left</a> side,
718+
thus would place a text-overflow ellipsis on the <a spec=css-writing-modes-3>left</a>
719+
to represent that clipped content.
720+
721+
<!-- insert RTL example diagram here to illustrate note. -->
722+
723+
<h3 id="ellipsis-scrolling" class="no-num no-toc">ellipsis interaction with scrolling interfaces</h3>
724+
725+
This section applies to elements with text-overflow other than ''text-overflow:clip''
726+
(non-clip text-overflow)
727+
and overflow:scroll.
728+
729+
When an element with non-clip text-overflow has overflow of scroll
730+
in the inline progression dimension of the text,
731+
and the browser provides a mechanism for scrolling
732+
(e.g. a scrollbar on the element,
733+
or a touch interface to swipe-scroll, etc.),
734+
there are additional implementation details that provide a better user experience:
735+
736+
When an element is scrolled (e.g. by the user, DOM manipulation),
737+
more of the element's content is shown.
738+
The value of text-overflow should not affect
739+
whether more of the element's content is shown or not.
740+
If a non-clip text-overflow is set,
741+
then as more content is scrolled into view,
742+
implementations should show whatever additional content fits,
743+
only truncating content which would otherwise be clipped
744+
(or is necessary to make room for the ellipsis/string),
745+
until the element is scrolled far enough
746+
to display the edge of the content
747+
at which point that content should be displayed
748+
rather than an ellipsis/string.
749+
750+
<div class="example"><p style="display:none">Example(s):
751+
752+
This example uses text-overflow on an element with overflow scroll
753+
to demonstrate the above described behavior.
754+
755+
sample CSS:
756+
<pre><code class="lang-css">
757+
div.crawlbar {
758+
text-overflow: ellipsis;
759+
height: 2em;
760+
overflow: scroll;
761+
white-space: nowrap;
762+
width: 15em;
763+
border:1em solid black;
764+
}
765+
</code></pre>
766+
767+
sample HTML fragment:
768+
<pre><code class="lang-markup">
769+
&lt;div class="crawlbar"&gt;
770+
CSS is awesome, especially when you can scroll
771+
to see extra text instead of just
772+
having it overlap other text by default.
773+
&lt;/div&gt;
774+
</code></pre>
775+
776+
demonstration of sample CSS and HTML:
777+
<div style="text-overflow: ellipsis; height: 2em; overflow: scroll; white-space: nowrap; width: 15em; border:1em solid black;">
778+
CSS is awesome, especially when you can scroll
779+
to see extra text instead of just
780+
having it overlap other text by default.
781+
</div>
782+
</div> <!-- example -->
783+
784+
While the content is being scrolled, implementations may adjust their rendering of ellipses (e.g. align to the box edge rather than line edge).
785+
786+
491787
<h2 id="max-lines">
492788
Limiting Visible Lines: the 'max-lines' property</h2>
493789

css-ui-4/images/cssisaw.png renamed to css-overflow-3/images/cssisaw.png

File renamed without changes.

css-ui-4/images/cssisaweso.png renamed to css-overflow-3/images/cssisaweso.png

File renamed without changes.

css-ui-4/images/cssisawesome.png renamed to css-overflow-3/images/cssisawesome.png

File renamed without changes.

css-ui-4/images/nes.png renamed to css-overflow-3/images/nes.png

File renamed without changes.

0 commit comments

Comments
 (0)