CODEWITHSUNDEEP
htmlcss
Prasad
Prasad

Reputation: 529

HTML Large text with dotted end

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..."

Upvotes: 6

Views: 3822

Answers (2)

Robby Cornelissen
Robby Cornelissen

Reputation: 97152

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.

Upvotes: 8

Khaleel
Khaleel

Reputation: 1371

Add CSS to the div.

 div
    {
    text-overflow:ellipsis;
    }

Hope it help

Upvotes: 0

Related Questions