Replace overflow content with "..." with html/javascript/jquery

Question

If you looks at youtube's main page, you can see that the end of every title is replaced by "..." if it haven't finished. I want to do the same.

for example: the sentence "I love going out every day" in a short div might changed to "I love going out every d..." If the user click "ctrl" + "+" it might change to "I love going out eve...".

How do i archive that?

[Google Search](https://www.google.co.in/search?q=jquery+text+more+less) — Tushar Gupta - curioustushar, Apr 02 '14 at 00:13
e.g. `.title { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }` — Milan and Friends, Apr 02 '14 at 00:14

score 1 · Answer 1 · answered Apr 02 '14 at 00:13

1

You can do that with the CSS text-overflow rule.

.titles {
    text-overflow: ellipsis;
}

(You'll probably want to set white-space: nowrap to achieve the full effect)

Replace overflow content with "..." with html/javascript/jquery

1 Answers1