[css3-ui][css4-ui] block-overflow property

A few years ago, we discussed a feature that would ellipsize content
in the block direction a la text-overflow, but concluded that it was
sufficiently different to warrant a separate property, and then never
pursued it.  I'd like to revive that with a concrete proposal.

There's a minor point of prior art in WebKit with the
-webkit-line-clamp property (barely documented, but an example shows
up in <http://dropshado.ws/post/1015351370/webkit-line-clamp>), which
is somehow built on top of our old flexbox code.  It lets you specify
a number of lines to display, either as an integer or a percentage of
the total number of lines; the rest of the content is suppressed (and
treated as overflowing, for the purpose of text-overflow).

Here's my proposal:

block-overflow: clip | ellipsis | <string>

"clip" is the current behavior, nothing special.

"ellipsis" is the same as <string>, it just defaults to the ellipsis
character or "...", so you don't have to actually type it.

<string> triggers the special overflow behavior.  First, the string is
laid out and has its height measured.  Then, all boxes and lineboxes
are removed from the element that are at least that height from the
bottom.  Then, a block box is inserted containing the <string> as
content.

There's more variety in styling block overflows than text overflows,
so we should also provide a pseudo-element (::block-ellipsis ?) that
represents the ellipsis, and can be styled as desired.  On the pseudo,
"content:auto" resolves to "none" if block-overflow is "clip", to an
ellipsis character if it's "ellipsis", and to the string if it's
<string>.  You can style this arbitrarily (which is why you have to
lay it out and measure it before you carve out space at the bottom of
the element).  You can even do silly things like positioning it, but
this won't affect the 'carve out space' behavior.

I think the default stylesheet should probably apply "display: block;
text-align: center;" to the pseudo.  We can let it inherit the rest of
its properties from the element.


We may want to accompany this with a less-stupid version of
-webkit-line-clamp, though this might be better handled by having a
line-height unit, or perhaps snapping to the line-grid.  Regardless,
this would just be a nice bonus, and is not required for the primary
use-case.

Thoughts?

~TJ

Received on Monday, 30 July 2012 22:28:30 UTC