How to truncate text via CSS at the beginning of a sentence, not the end?

Question

Just wondering if this is possible in purely just CSS. I want to truncate some text for a file uploader so that it doesn't overflow. The text that displays the file name is styled with the following CSS:

span {
  margin-left: 20px;
  overflow: hidden;
  max-width: 50ch;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  font-style: italic;
  background: var(--color-light-gray);
  padding: 3px 20px;
  border-radius: 8px;
}

With this code, if you upload a file called something like:

Long_file_name_blah_blah_blah.pdf

It will truncate to something like:

Long_file_name_bl...

This is fine, however since it's a file uploader I'd prefer it if the file extension was visible after truncation, so I'm thinking I want to truncate it from the beginning of the file name, that way the same file above would look like:

...lah_blah_blah.pdf

However I can't find a way to do it in pure CSS. I could do this in javascript but I was wondering if there was a way to do it just with HTML and CSS?

Thanks!

score 1 · Accepted Answer · answered Nov 19 '21 at 12:55

1

You could add direction: rtl; :

span {
  margin-left: 20px;
  overflow: hidden;
  max-width: 50ch;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  font-style: italic;
  background: var(--color-light-gray);
  padding: 3px 20px;
  border-radius: 8px;
  direction: rtl;
}

<span>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest.pdf</span>

answered Nov 19 '21 at 12:55

Tom

4,972
3
10
28

1

beware: a coworker recently found that this solution breaks if the text in your span starts with a slash, for example. this should NOT be considered a reliable solution. – Chris Calo Jun 17 '22 at 18:46

How to truncate text via CSS at the beginning of a sentence, not the end?

1 Answers1