CSS styling to show end of single text string [duplicate]

问题

I'm just learning CSS: this seems like a simple task but I've spent a while researching and can't get it to work:

Say I have a long text string -- how do you 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>

For example, 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).

Any help would be truly appreciated; I may just be missing one line. Thank you so much!

回答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>

回答2:

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>

回答3:

If you want the end of the string to show and hide the beginning, you can add the direction:rtl; property.

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

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

来源：https://stackoverflow.com/questions/48481284/css-styling-to-show-end-of-single-text-string

标签

html

css

overflow