1232996 - Implement CSS block-overflow property

Status: UNCONFIRMED

(Core :: CSS Parsing and Computation, defect)

Description

[yisibl]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36

Steps to reproduce:

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 Tab Atkins Jr. proposal:

block-overflow: clip | ellipsis | <string>

And Opera supports text-overflow:-o-ellipsis-lastline.

Demo: http://jsbin.com/ufifoq/12/edit?html,css,output

Perhaps we also need to implement the "max-lines"(https://bugzilla.mozilla.org/show_bug.cgi?id=1232992) property, which is a very urgent need.