截断javascript多行不工作

truncate javascript multiple lines not working

本文关键字：工作 javascript 截断      更新时间：2023-09-26

我使用truncate.js (https://github.com/jeffchan/truncate.js)在文本溢出时将省略号放入文本中。当我跟随演示时，它不工作，我想。下面是我的代码:

CSHTML文件:

<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>

CSHTML文件中的JavaScript:

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

我想截断yammerMessagesdiv中的文本，它不工作，因为文本只是继续通过宽度的高度限制。

编辑:

我已经得到了截断方法的工作，但我的内容内的span元素'message'重新加载文本经常，我如何保持截断它每次它的变化?

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

这将截断div中的文本一次，但是当'message'中的内容发生变化时，它不会让我再次截断。

解决:

由于这个库不能解决我的问题，我最终使用了解决我问题的dotdotdot jquery库。

为了截断div，我使用了dotdotdot方法: 
 $("#text-wrapper").dotdotdot({ wrap: 'letter' });

然后，当文本在div内更改时，我使用trigger方法，然后删除它被调用的元素的截断:

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

然后再次截断div内加载的新文本:

 $("#text-wrapper").dotdotdot({ wrap: 'letter' });
相关文章：