- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 30 Jul 2012 15:27:42 -0700
- To: www-style list <www-style@w3.org>
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