[css-overflow] consider giving more fine control on ellipsis

[nico3333fr]

https://drafts.csswg.org/css-overflow/ - I suppose.

Author should be able to control the way ellipsis happens and is computed, here is a simple example I face (I'm developing ProtonMail v4):

<span class="ellipsis">
  <span class="inline name">test account</span> 
  <span class="inline mail opacity-50">&lt;testaccount@protonmail.com&gt;</span>
</span>

Actually, I've to set up everything inline and apply the ellipsis on the entire block. Could be nice to be able to get something like this:

• test account <testaccount@proton...>
• test account <...>
• test accou...

In this case, I would need:

• something that allows me to say text-overflow: ellipsis <please use the color of the child element that is ellipsized> (which is currently not the case)
• better: a kind of parameter for the "priority" on how to apply ellipsis stuff

[TheSonOfThomp]

Are you asking for ellipsis color control, or control over which characters are 'ellipsized' (or both)?

[nico3333fr]

Both :)

[SebastianZ]

Those two things are separate enough to discuss them separately. So you should rather create a new one for styling the ellipsis and keep this one for providing control over how ellipsizing is done.

For what it's worth, there are previous discussions on ellipsizing in the middle of a string in #3937.

Sebastian

[SebastianZ]

To allow more fine-grained control over what's ellipsized first, a text-overflow-priority (name to be discussed) could be introduced. The higher the priority the later it gets ellipsized when there's not enough space.

With that, the expected output of the given example could be achieved like this:

.ellipsis {
  text-overflow: ellipsis;
}

.name {
  text-overflow-priority: 1;
}

.bracket {
  text-overflow-priority: 2;
}

.mail {
  text-overflow-priority: 3;
}

Note: The HTML would have to be adjusted slightly to get the expected results (also, removing classes unnecessary for the example):

<span class="ellipsis">
  <span class="name">test account</span> 
  <span class="mail"><span class="bracket">&lt;</span>testaccount@protonmail.com<span class="bracket">&gt;</span></span>
</span>

I see some issues with this solution, though, that need to be discussed:

1. It requires to adjust the HTML structure for controlling the display.
2. How does ellipsizing behave if higher-priority parts are surrounded by lower-priority parts.
3. It doesn't provide an option to completely avoid ellipsizing, which might be required for some use cases (e.g. extensions of file names).
4. It requires to switch from ellipsizing the different parts to clipping them once they are completely ellipsized and start ellipsizing other parts.

Sebastian