Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 80 additions & 42 deletions css-overflow-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -800,55 +800,93 @@ Indicating Block-Axis Overflow: the 'block-ellipsis' property</h3>
</dl>

When 'block-ellipsis' is neither ''no-ellipsis'' nor the empty string,
the <a>block overflow ellipsis</a> string
is wrapped in an anonymous inline
and placed at the end of the line box
as a direct child of the <a>block container</a>’s <a>root inline box</a>,
reducing the space in the line box
the [=block overflow ellipsis=] string
is placed at the end of the line box
reducing the space
available to the other contents of the line.
This inline is assigned ''unicode-bidi: plaintext''
and ''line-height: 0''
and is placed in the line box after the last
<a>soft wrap opportunity</a> (see [[!CSS-TEXT-3]])
that would still allow the entire <a>block overflow ellipsis</a> to fit on the line,
applying [[css-text-4#white-space-rules]] including [[css-text-4#white-space-phase-2]]
before inserting the [=block overflow ellipsis=].
For this purpose, <a>soft wrap opportunities</a> added by 'overflow-wrap' are ignored,
as are those inhibited by ''text-wrap-mode: nowrap''.
If this results in the entire contents of the line box being displaced,
the line box is considered to contain a [=strut=], as defined in [[CSS2/visudet#leading]].
Text <a href="https://www.w3.org/TR/css-text-3/#justification">alignment and justification</a>
occurs after placement,
and measures the inserted <a>block overflow ellipsis</a>
together with the rest of the line’s content.

<wpt>
block-ellipsis-001.html
block-ellipsis-002.html
block-ellipsis-003.html
block-ellipsis-004.html
block-ellipsis-005.html
block-ellipsis-006.html
block-ellipsis-010.html
block-ellipsis-013.html
block-ellipsis-014.html
block-ellipsis-015.tentative.html
block-ellipsis-016.html
block-ellipsis-017.html
block-ellipsis-018.html
block-ellipsis-023.html
block-ellipsis-024.html
block-ellipsis-025.html
block-ellipsis-026.html
block-ellipsis-027.html
block-ellipsis-028.html
block-ellipsis-repaint-001.html
block-ellipsis-repaint-003.html
block-ellipsis-repaint-004.html
block-ellipsis-repaint-001.html
webkit-line-clamp-014.html
webkit-line-clamp-025.html
webkit-line-clamp-032.html
webkit-line-clamp-035.html
</wpt>

More specifically:
* The [=block overflow ellipsis=]
is wrapped in an anonymous inline
whose parent is the [=block container=]’s [=root inline box=].
This inline is assigned ''unicode-bidi: plaintext''
and ''line-height: 0''.

<wpt>
block-ellipsis-002.html
block-ellipsis-003.html
block-ellipsis-004.html
block-ellipsis-005.html
block-ellipsis-006.html
block-ellipsis-010.html
</wpt>

* The user agent makes room as necessary of the [=block overflow ellipsis=]
by displacing content from the end of the line as if wrapping,
until the last <a>soft wrap opportunity</a> (see [[!CSS-TEXT-3]])
that would still allow the entire <a>block overflow ellipsis</a> to fit on the line,
applying [[css-text-4#white-space-rules]] including [[css-text-4#white-space-phase-2]]
before insertion.

<wpt>
block-ellipsis-001.html
block-ellipsis-028.html
webkit-line-clamp-025.html
</wpt>

For this purpose, <a>soft wrap opportunities</a> added by 'overflow-wrap' are ignored,
as are those inhibited by ''text-wrap-mode: nowrap''.

<wpt>
block-ellipsis-013.html
block-ellipsis-014.html
block-ellipsis-015.tentative.html
block-ellipsis-016.html
block-ellipsis-017.html
block-ellipsis-027.html
</wpt>

If this results in the entire contents of the line box being displaced,
the line box is considered to contain a [=strut=], as defined in [[CSS2/visudet#leading]].

<wpt>
block-ellipsis-016.html
block-ellipsis-018.html
block-ellipsis-025.html
</wpt>

* The anonymous inline of [=block overflow ellipsis=] is placed
after any remaining content,
after [[css-text-4#white-space-phase-2]],
as a direct child of the <a>block container</a>’s <a>root inline box</a>,
with the appropriate bidi embedding levels
given its directionality
and that of its parent.

<wpt>
block-ellipsis-004.html
block-ellipsis-005.html
block-ellipsis-006.html
block-ellipsis-026.html
webkit-line-clamp-014.html
webkit-line-clamp-032.html
webkit-line-clamp-035.html
</wpt>

Text <a href="https://www.w3.org/TR/css-text-3/#justification">alignment and justification</a>
occurs after placement,
and measures the inserted <a>block overflow ellipsis</a>
together with the rest of the line’s content.

<wpt>
webkit-line-clamp-051.html
webkit-line-clamp-052.html
webkit-line-clamp-053.html
Expand Down