truncate javascript multiple lines not working

I am using truncate.js (http://ift.tt/18bH4Ge) 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="http://ift.tt/1N6R8Qb"><img src="http://ift.tt/1hh8xf0" 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://ift.tt/1N6R8Qf">
    <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.