Search code examples
javascripthtmlcssellipsis

CSS word ellipsis ('...') after one or two lines

I'm trying to create a word-wrap in JavaScript using CSS, and the condition is:

If DIV contains one very long word, such as "asdasfljashglajksgkjasghklajsghl", I want to display: 

     |asdasfljashglajk...|

If DIV contains a long sentence, such as "if i had a dime for everytime i was told i can't", I want to display: 

     |if i had a dime for|
     |everytime i was... |

I work with HTML, CSS, JavaScript. I can't use jQuery.

Please let me know if it's possible.

Solution

  • For this you can use text-overflow: ellipsis; property. Write like this

    white-space: nowrap;
text-overflow: ellipsis;