CSS styling to show end of single text string

Question

I have a long text string. How do I get all the text to show on one line and with a certain width, but limit what is shown to the end of the string?

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

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

Here it shows the beginning of the string and cuts off the end, but I need it to show the end and cut off the beginning.

Answer 1

Here is a flex solution without changing direction:

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

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>