Question

我正在使用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
    });

我想截断yammerMessages div中的文本并且它不起作用，因为文本只是继续通过宽度的高度限制。

编辑：

我有截断方法工作，但我的内容在span元素＆＃39;消息＆＃39;经常重新加载文本，如何在每次更改时都将其截断？

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

这会截断div中的文字一次，但当内容在“消息”中更改时，它不会让我再次截断。

求助：

在下面找我的答案。

Answer 1

由于这个库无法解决我的问题，我最后使用了dotdotdot jquery库来解决我的问题。

要截断div，我使用了dotdotdot方法：

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

然后当div中的文本发生变化时，我使用了触发器方法，然后删除了调用它的元素的截断：

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

然后我再次截断div中加载的新文本：

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

截断javascript多行不起作用

1 个答案: