如何通过 CSS 在句子开头而不是结尾截断文本？

Question

只是想知道这在 CSS 中是否可行。我想为文件上传器截断一些文本，以免它溢出。显示文件名的文本具有以下样式 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;
}

使用此代码，如果您上传的文件名称类似于：

Long_file_name_blah_blah_blah.pdf

它会被截断为：

Long_file_name_bl...

这很好，但是因为它是一个文件上传器，所以如果文件扩展名在截断后可见，我更喜欢它，所以我想我想从文件名的开头截断它，这样上面的相同文件看起来像：

...lah_blah_blah.pdf

但是我找不到一种方法来做到这一点 CSS。我可以在 javascript 中做到这一点，但我想知道是否有办法只用 HTML 和 CSS?

谢谢！

Answer 1

您可以添加 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>

如何通过 CSS 在句子开头而不是结尾截断文本？

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

html

css

styling