[css-ui][css-overflow][css-line-grid] Handle block overflow and block-level elision markers

I'd like to pick up the discussion again about block overflow and
setting elision markers like ellipses. From what I read, there were
already at least two proposals[1][2] and one decision to defer[3]
defining a block ellipsis handling.

Proposals so far:

Tab Atkins:
  block-overflow: clip | ellipsis | <string>
  ::block-ellipsis


Marat Tanalin (example turned into CSS syntax):
  text-overflow-limit: <length>;
  text-overflow-style: [ clip | ellipsis | <string> ]{1,2};
  text-overflow: <'text-overflow-limit'> || <'text-overflow-style'>

Plus the introduction of a new unit ln for <length> referring to line numbers.


Brad Kemper (in response to Marat Tanalin; example turned into CSS syntax):
  text-overflow-lines: single | multi
  text-overflow: [ clip | ellipsis | <string> ]{1,2} <'text-overflow-lines'>

Overflow Level 3 already defines a max-lines property, which seems to
handle Marat's use case of clamping the number of lines.

I think it should be relatively easy from that point to define how
block overflow should be handled.
Personally I prefer to extend text-overflow in similar to what Marat
and Brad described. I imagine something like this:

  text-overflow-type: inline | block
  text-overflow-style: [ clip | ellipsis | <string> ]{1,2}
  text-overflow: <'text-overflow-type'> || <'text-overflow-style'>

where:
  'inline' means the current behavior of text-overflow working inline.
  'block' means clipping the text on the block level.

Example for block-level ellipsis:
p {
  width: 100px;
  height: 100px;
  overflow: hidden;
  text-overflow: block ellipsis;
}

Applied to a block like this:

  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Sed
  ac tempor diam. Suspendisse
  pellentesque ante eu turpis
  commodo vel elementum orci
  aliquam.

You would get this as result:

  Lorem ipsum
  dolor sit amet,
  consectetur
  adipiscing elit.
  Sed ac temp…

Example for block-level elision marker in combination with max-lines:
p {
  width: 200px;
  max-lines: 3;
  text-overflow: block "[snip]";
}

Applied to the block of the previous example would result in this:
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Sed
  ac tempor diam. Suspendisse [snip]

Best regards,

Sebastian

[1] https://lists.w3.org/Archives/Public/www-style/2012Jan/0627.html
[2] https://lists.w3.org/Archives/Public/www-style/2012Jul/0688.html
[3] https://lists.w3.org/Archives/Public/www-style/2014Jun/0109.html

Received on Friday, 12 February 2016 13:31:10 UTC