HTML Large text with dotted end

Question

I want to display text inside a fixed size div if the size of text is large than more text should be indicated with dots.

example

if number of text can be displayed inside div is 10 then

text "Australia" should be displayed like "Australia" text "United States Of America" should be displayed like "United Sta..."

[**Text-overflow:ellipsis @ MDN**](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) — Paulie_D, Aug 13 '14 at 09:11
Google gets a lot more helpful when you know the name of what you're trying to do.. these are called 'ellipsis': http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ — Flynn1179, Aug 13 '14 at 09:12
[my solution here](http://stackoverflow.com/a/18458345/703717) may also help you as it shows some methods for a multi-line ellipsis — Danield, Aug 13 '14 at 09:48

Robby Cornelissen · Accepted Answer · 2014-08-13T09:34:28.427

8

This is the CSS property you're looking for:

text-overflow: ellipsis;

For example:

<div style="width: 5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
    United States of America
</div>

Will display

United St...

The text must be in one line (hence the white-space: nowrap), and overflow a box where the overflow is hidden (hence the overflow: hidden). Fiddle available here.

edited Aug 13 '14 at 09:34

answered Aug 13 '14 at 09:11

Robby Cornelissen

91,784
22
134
156

Note: `white-space: nowrap;` is also essential here – SW4 Aug 13 '14 at 09:15
This is working only for single line, but according to user it may multiple lines. – Sameera Thilakasiri Aug 13 '14 at 09:20
@SameeraThilakasiri That's not specified in the question. Is that why you downvoted me? – Robby Cornelissen Aug 13 '14 at 09:21
2

@SameeraThilakasiri There is no point to give a down voting. If OP needs different solution he should be clear while writing question. +1 from me Rooby. – Kheema Pandey Aug 13 '14 at 09:26

score 0 · Answer 2 · answered Aug 13 '14 at 09:12

0

Add CSS to the div.

 div
    {
    text-overflow:ellipsis;
    }

Hope it help

answered Aug 13 '14 at 09:12

Khaleel

1,212
2
16
34

HTML Large text with dotted end

2 Answers2

Linked