javascript - hiding extra contents in DIV with following dots -

i need hide text div element following dots (...)

i m using

<div style="width:200px; height:2em; line-height:2em; overflow:hidden;" id="box">  text text text text </div>

result
hides rest of content overflows div
wants if has hide 3 dots ... should placed @ end else not

output need
text text te...

here's possible solution using text-overflow:ellipsis:

.ellipsis {     width:200px;     height:2em;     line-height:2em;     overflow:hidden;     text-overflow:ellipsis;     white-space:nowrap; }

Live