Posted By

JoshChris on 07/11/13


Tagged

jquery text overflow


Versions (?)

Multiline Text Overflow


 / Published in: jQuery
 

URL: http://jsfiddle.net/eAyyL/

Simple function to include in your script to enable multi-line text-overflow. See the jsfiddle (http://jsfiddle.net/eAyyL/) for details on the necessary CSS and HTML layout.

  1. function multiline_text_overflow(elem) {
  2. $(elem).each(function(i){
  3. $(this).wrapInner("<span class='mlto'></span>");
  4. var p=$(this).find(".mlto");
  5. var divh = $(this).height();
  6. while($(p).outerHeight()>divh) {
  7. $(p).text(function (index, text) {
  8. return text.replace(/\W*\s(\S)*$/, '...');
  9. });
  10. }
  11. })
  12. }
  13.  
  14. //usage
  15. //multiline_text_overflow(".news_item");

Report this snippet  

You need to login to post a comment.