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

Question

我有一个很长的文本字符串。如何让所有文本以一定的宽度显示在一行上，但限制显示在字符串末尾的内容？

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

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

这里显示字符串的开头并截断结尾，但我需要它显示结尾并截断开头。

Answer 1

如果希望字符串的结尾显示和隐藏开头，可以添加direction:rtl; 属性.

.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;
    direction: rtl;
}

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

Answer 3

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

.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>

CSS styling to show end of single text string