CSS样式显示单个文本字符串的结尾

Question

我只是在学习CSS:这看起来像一个简单的任务,但我花了一段时间研究,无法让它工作:

假设我有一个很长的文本字符串 - 如何让所有文本显示在一行并具有一定宽度,但是限制显示在字符串末尾的内容？

.demo {
    border: 1px solid red;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
}

<p class="demo">hello this is a string</p>

例如,这里显示字符串的开头(并截断结束),但我需要它来显示结束(并切断开头).

任何帮助都会得到真正的赞赏; 我可能只是错过了一行.非常感谢!

Answer 1

.demo {
    border: 1px solid red;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    direction: rtl;
}

<p class="demo">hello this is a string</p>

Answer 2

这是一个不改变方向的灵活解决方案:

.demo {
  border: 1px solid red;
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

<p class="demo">hello this is a string</p>