truncate javascript multiple lines not working

Question

I am using truncate.js (https://github.com/jeffchan/truncate.js) to put ellipsis into a text when it overflows. It is not working when I am following the demo right I think. Here is my code:

CSHTML File:

<div id="yammerDiv">

<div id="yammerHeader">
    <a href="https://www.yammer.com/abcam.com/#/threads/company?type=general"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Yammer_logo.png" alt="Yammer" height="20px;" width="50%"></a>
</div>
<div id="yammerMessages" data-truncate-lines="3" data-toggle="modal" data-target="#myModal" style="margin-top: 25px;">
    <img id="loading-gif" src="http://i559.photobucket.com/albums/ss36/madszckey01/speakker/buffering.gif">
    <span id="message"></span>
    <p id="sender"></p>

</div>
<div id="yammerButtons" style="display:none">
    <button id="previous" type="button" class="btn btn-default btn-xs" aria-label="Left Align" onclick="onPrevious()">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    </button>
    <input type="checkbox" id="myCheck" onclick="autoscroll()" data-toggle='tooltip' data-placement='bottom' data-original-title="Auto-Scroll" class='checkbox'>
    <button id="next" type="button" class="btn btn-default btn-xs" aria-label="Right Align" onclick="onNext()">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    </button>
</div>

JavaScript inside the CSHTML file:

$('#yammerMessages').truncate({
        lines: 3,
        lineHeight: 1.5
    });

I want to truncate the text in the yammerMessages div and its not working as the text just continues through the height limit of the width.

EDIT:

I have got the truncate method working but my content inside the span element 'message' reloads text often and how do I keep truncating it every time it changes?

 $('#yammerMessages').truncate({
        lines: 7,
        lineHeight: 14
    });

This truncates the text inside the div once, but when the content changes in 'message', it won't let me truncate again.

SOLVED:

Look for my answer below.

can you add your statement including the truncate.js library — Mousey
truncates working so I don't think theres any problem with my include statements and also no errors in console. But I have another problem which I wrote in my edit. — user3650664

user3650664 user3650664 · Accepted Answer · 2015-08-04T13:40:16

Since this library would not solve my problem, I just ended up using dotdotdot jquery library which solved my issue.

To truncate for the div, I used the dotdotdot method:

 $("#text-wrapper").dotdotdot({ wrap: 'letter' });

Then when the text changes inside the div, I use the trigger method which then deletes the truncation of the element it was called on:

  $("#text-wrapper").trigger("destroy");

Then I simply truncate again the new text loaded inside the div:

 $("#text-wrapper").dotdotdot({ wrap: 'letter' });

truncate javascript multiple lines not working

1 Answers