0

I have text inside div and i want it to be ellipse as per the div width in one line. If I am re sizing the window so it should calculate the width and fit the text into it with ellipse and "More" text. Right now, I am defining letter size and substr it. which is not working in case of resizing.

var showChar = 50;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
    $('.eve_ticket .ticket_type').each(function() {
        var content = $(this).html();
        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }
    });
  • You might be better off with `text-overflow: ellipsis;` – freedomn-m Oct 18 '19 at 09:59
  • It looks like you're expecting to change this each time you resize the window. If so, as soon as you use `$(this).html(html)` you then can't use `content= $(this).html()` to reapply, so you'll need more changes than just calculating the width. – freedomn-m Oct 18 '19 at 10:00
  • I want More text at the end of ellipsis as well.. which is not possible in css –  Oct 18 '19 at 10:05
  • Try one of the solutions here: https://stackoverflow.com/questions/9333379/check-if-an-elements-content-is-overflowing – freedomn-m Oct 18 '19 at 10:07

0 Answers0