how to generate "..." after certain words in a paragraph. Javascript

Question

I have a long paragraph but i only want to show some portion of it. Is it possible to generate "..." after some words.

for example, this is my paragraph.

 <div class="paragraph">
 <p>Lore gypsum dolor sit met, con sec tetuer dip icings lite. Aeneid commodore ligula beget dolor. Aeneid mas- s. Cum socialist toque Pentiums lit something something</p>
 </div>

and i want to show in the page like "Lore gypsum dolor sit me ...."

You can use CSS's `text-overflow` property. – Tushar Dec 12 '15 at 09:53 — Tushar, Dec 12 '15 at 09:53
http://stackoverflow.com/a/1022672/5305938 – Jacques Marais Dec 12 '15 at 09:58 — Jacques Marais, Dec 12 '15 at 09:58

ganesh satpute · Accepted Answer · 2015-12-12T10:02:42.950

0

Try text-overflow: ellipsis;

.paragraph{
 white-space: nowrap; 
width: 120px; 
overflow: hidden;
text-overflow: ellipsis;
}

for more details http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

edited Dec 12 '15 at 10:02

answered Dec 12 '15 at 09:55

ganesh satpute

391
2
10

This won't work when you want to specify a certain amount of words.. – Jacques Marais Dec 12 '15 at 09:57
You can apply width to your class that will solve your issues – ganesh satpute Dec 12 '15 at 09:59
To address the comment, this will _not_ work when you want to specify a number of _words_. It will if you specify a _width_, but if there is a hard requirement (however how foolish) for words, you're out of luck (with CSS). As an honourable mention, for monospaced fonts you can use the [`ch`](https://developer.mozilla.org/en-US/docs/Web/CSS/length#ch) unit, which would allow you to insert an ellipsis after a certain amount of _characters_. – Félix Saparelli Dec 12 '15 at 10:20

score 0 · Answer 2 · answered Dec 12 '15 at 09:59

0

you can try this one:

.paragraph {
    white-space: nowrap;
    overflow: hidden;
}

DEMO HERE

answered Dec 12 '15 at 09:59

Ivin Raj

3,448
2
28
65

how to generate "..." after certain words in a paragraph. Javascript

2 Answers2