CSS style to show the end of a single text line

Question

I'm just learning CSS: this seems like a simple task, but I spent some time researching and can't make it work:

Say I have a long text line - how do you get all the text to be displayed in one line and with a certain width, but limit what is shown at the end of the line?

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

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

Run codeHide result

For example, here it shows the beginning of a line (and cuts off the end), but I need it to show the end (and cut off the beginning).

Any help would be truly appreciated; I can just skip one line. Thank you very much!

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>

Run codeHide result

Answer 2

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

Hide result

Answer 3

Here is a flexible 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>

Run codeHide result