Search code examples
htmlcssuser-interfaceuser-experience

Paragraph text to single line and display only last characters

In my program I have added to restrict paragraph text to single line display in CSS.

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;

But it display the initial words only. I want to display the last words of the paragraph when its overflow.

Original Text:

The purpose of Pattern Based Writing: Quick & Easy Essay is to quickly and easily teach students how to organize information and make points clear.

Current Output:

The purpose of Pattern Based Writing: Quick & Easy Essay is to quickly and easily teach studen..

Expected Output:

Essay is to quickly and easily teach students how to organize information and make points clear.

How to achieve this with CSS?

Solution

  • Duplicate of Text-overflow ellipsis on left side

    HTML:

    <p><bdi>The purpose of Pattern Based Writing: Quick & Easy Essay is to quickly and easily teach students how to organize information and make points clear.</bdi></p>

    CSS:

    p {  
  white-space: nowrap;                   
  overflow: hidden;
  text-overflow: ellipsis;  
  width:550px;
  direction:rtl;
  text-align:left;
}