<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> </head> <style type="text/css"> .line{ width:100px; height:20px; background: blanchedalmond; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .block{ width: 250px; background: greenyellow; } </style> <body> <section class="line"> boom clap you can you up!come on! </section> <section class="block"> the day you went the way .l lose my life!call me cray call me back,call sofarling the day you went the day </section> </body> <script type="text/javascript"> var wordlimit=function(){ $(".block").each(function(){ var copythis=$(this.cloneNode(true)).hide().css({ 'position':'absolute', 'width':'auto', 'overflow':'visible' }); $(this).after(copythis); if(copythis.width()>$(this).width()){ $(this).text($(this).text().substring(0,$(this).html().length-4)); $(this).html($(this).html()+'...'); copythis.remove(); wordlimit(); } else{ copythis.remove(); return; } }); } wordlimit(); </script> </html>