Menu
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..."
636
Quite easy thing to do: just add / remove class with text-overflow:ellipsis.
To add an ellipsis in the HTML <span> element having the CSS overflow property set to “hidden”, you need to add the text-overflow property. Use its “ellipsis” value, which will add dots at the end of the content within the <span>.
Text overflow is a way to limit text that exceeds the width of the element and to insert an ellipsis (three dots “…”). text-overflow: ( clip | ellipsis | <_string_> ); When showing text-overflow: ellipsis in my lectures, I always get two reactions.
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.
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
