HTML Large Text with Dotted End

Question

I want to display text inside a fixed size div if the text size is larger, the more text should be indicated by dots.

Example

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

the text "Australia" should be displayed as "Australia" the text "United States of America" ​​should be displayed as "United Sta ..."

Answer 1

This is the CSS property you are looking for:

text-overflow: ellipsis; 

For instance:

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

Will display

United St ...

The text should be on one line (hence, white-space: nowrap ) and overflow the field in which the overflow is hidden (hence, overflow: hidden ). The script is available here .

Answer 2

Add CSS to the div.

  div { text-overflow:ellipsis; } 

Hope this helps