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).text($(this).data("originalText"));
  4. $(this).data("originalText", $(this).text()).wrapInner("<span class='mlto'></span>");
  5. var p=$(this).find(".mlto");
  6. var divh = $(this).height();
  7. while($(p).outerHeight()>divh) {
  8. $(p).text(function (index, text) {
  9. return text.replace(/\W*\s(\S)*$/, '...');
  10. });
  11. }
  12. })
  13. }
  14.  
  15. //example
  16. $(document).ready(function () {
  17. multiline_text_overflow($(".news_item"));
  18.  
  19. $(window).on("orientationchange resize", function() {
  20. multiline_text_overflow($(".news_item"));
  21. });
  22. });

Report this snippet  

You need to login to post a comment.