Csswg-drafts: [css-ui-4] Ellipsizing of text in middle of string

[HarrisonB]

Hello,

There are many cases in which the information at the beginning & end (but not middle) of a string of characters are important, especially in technical identifiers (e.g. URLs, file names, library call numbers, etc.). It would be wonderful if this was supported in CSS itself. Attempts to do with the current tools available are unattractive and complex at best.

Apologies if this is better addressed in the mailing list--the guidelines and other material online were unclear which is preferred in cases such as these.

I am following on from a previous inquiry led by Sebastian Zartner, to whom I owe thanks. His [email protected] thread from 2013 ended without any conclusions or next steps. Note that I am not the author of the detailed proposal listed below, but merely a web developer interested in highlighting this proposal.

• Proposal of new behavior
• Mailing list of previous discussion (from 2013)
• Relevant portion of specification

[SebastianZ]

Thank you for picking up my proposal, Harrison!

For reference, my proposal actually included two ideas. The first one was to allow cropping in the middle of the element's content and the second, related one to preserve some part of the contents on smaller element widths.

To avoid discussing two features at the same time, let's focus solely on middle-cropping here.

My proposal back then was to reuse text-overflow for this purpose and simply add a third value to it specifying the cropping in the center of the contents. @MatsPalmgren had another proposal in the related enhancement request for Gecko, which let you move the end ellipsis. Both proposals turned text-overflow into a shorthand and introduced different longhands allowing to control the different partial values separately.

Issues with the proposals, which need to be solved:

1. Normally, you will only want to crop either at the beginning and/or end or in the middle, but not both.
2. For middle-cropping you will only want to have ellipsizing but not clipping, so clip should not be allowed for it.
3. Handling of inline contents other than text.

Sebastian

[SebastianZ]

Additional note: The proposal only covers inline content cropping. There might be cases, in which you'd want to do block-level middle-cropping. Though I guess that's rather related to line-clamp.

Sebastian

[frivoal]

There might be cases, in which you'd want to do block-level middle-cropping.

Would there? on single line ellipsis, doing it it the middle makes sense to me, but on multiline, it seems a lot less useful. Maybe I'm just short on imagination. Do you have examples of when you'd want that?

[jeremiahlee]

I would appreciate this feature as well. macOS Finder uses an inner ellipsis likely because the most variation and differentiation in a filename is at the beginning and end of the filename.

[jonjohnjohnson]

<div class="mete">
  <span class="mete-start">When rendering this long sentence&nbsp;</span>
  <span class="mete-end">you will often see a middle ellipsis!!!</span>
</div>

.mete {
  display: flex;
  align-items: baseline;
  justify-content: center;
  height: 1.5em;
  line-height: 1.5em;
}
.mete-start, .mete-end {
  overflow: hidden;
  height: inherit;
  flex: 0 1 auto;
}
.mete-start {
  word-break: break-all;
}
.mete-end {
  white-space: nowrap;
  direction: rtl;
  text-overflow: ellipsis;
  text-overflow: ' ...';
}
.mete-end::after {
  content: '\200E';
}

Here's my utility used to solve this gap in the spec for a few years now. But it has the caveats that it doesn't work in webkit, misuses direction, and is tricky to semantically style (em/strong) text across the center boundary, but it is selectable and mostly accessible. :/

https://jsfiddle.net/t5jvns7q/

[SebastianZ]

There might be cases, in which you'd want to do block-level middle-cropping.

Would there? on single line ellipsis, doing it it the middle makes sense to me, but on multiline, it seems a lot less useful. Maybe I'm just short on imagination. Do you have examples of when you'd want that?

Well, the cases are not as strong as the single-line cases, I guess. Though the principle stays the same, i.e. cases, in which you care more about the ending than the middle of the contents.

One use case could be the Inspector panel within browser DevTools, which shows the text contents of the elements. When they span over many lines, it gets quickly hard to skim over the HTML structure. Those could limit the contents to a specific number of lines but crop them in the middle of the contents, so it's easy to skim over them.

Example:

Could be shrinked to someting like in this mockup:

Sebastian