🦋 Changeset detected

Latest commit: e4ee5f2

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Currently it's possible to truncate a single element with css-truncate css-truncate-overflow without having to nest an extra <span>. Maybe we could allow using a combo like Truncate Truncate-text?

<span class="Truncate Truncate-text">Truncate some text</span>

Or just use Truncate for single use cases and then also add Truncate Truncate--multiple

<span class="Truncate">Truncate some text</span>

<span class="Truncate Truncate--multiple">
  <span class="Truncate-item">Truncate item 1</span>
  <span class="Truncate-item">Truncate item 2</span>
  <span class="Truncate-item">Truncate item 3</span>
</span>

there isn't enough support of the grid-template-columns property

We might need to do some testing but it should be fine as long as we don't use subgrid? 🤔

.Truncate can have multiple items with a "primary" item that doesn't truncate at the same speed as the rest.

This doesn't seem to work and .Truncate-text--primary never truncates and gets cut off when not enough space.

Not sure if it possible to also truncate .Truncate-text--primary but only once the non-primary text truncated first. Might not be possible with flexbox alone?

Here a Codepen from trying to fix the file header https://github.com/github/github/issues/117827#issuecomment-514511496. Also relies on grid-template-columns. It keeps short file names un-truncated until there is almost no space. But starts to truncate the file name earlier, if the file name is long.

there isn't enough support of the grid-template-columns property

We might need to do some testing but it should be fine as long as we don't use subgrid? 🤔

The compatibility issue stylelint has warned for grid-template-columns seems incorrect. We discussed this last Friday here.

I made some updates: preview

Found it: github/github#119636. Not sure if it's still an issue in Safari. The other problem was with dotfiles where the dot moved to the end:

ooo, that's a bad bug, I'm removing the --beginning option.

This doesn't seem to work and .Truncate-text--primary never truncates and gets cut off when not enough space.

This is fixed using flex-basis see latest preview

Issues with grid support aside I'm not convinced it's a better alternative to flexbox here. I think flexbox gives us some more options about what parts of a string we truncate. see second example