Paragraph text to single line and display only last characters

Question

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?

Ashokan Sivapragasam · Accepted Answer · 2019-03-12T09:18:31.730

1

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;
}

edited Mar 12 '19 at 09:18

answered Mar 12 '19 at 06:02

Ashokan Sivapragasam

2,033
2
18
39

Its working.. but another one issue will happening. if the paragraph has numbers it will be align in right. for example: original text: 1. B2H : current text: B2H .1 which is wrong. – Karthik SWOT Mar 12 '19 at 06:15
2

Put your content in a tag. It will work!! – Sagar Kulthe Mar 12 '19 at 06:50
We aligned the text direction from right to left by 'rtl'. So, it thinks 1., 2., as list item index and moves index alone to right hand side. – Ashokan Sivapragasam Mar 12 '19 at 09:18
Yes, works! Have you tried it? Mark as answer if it helped. Thanks Sagar! – Ashokan Sivapragasam Mar 12 '19 at 09:19
1

tag works perfectly!.. Thanks @AshokanSivapragasam – Karthik SWOT Mar 16 '19 at 01:54

Paragraph text to single line and display only last characters

1 Answers1