截断javascript多行不起作用答案

【问题标题】：truncate javascript multiple lines not working截断javascript多行不起作用
【发布时间】：2015-08-04 09:57:30
【问题描述】：

我正在使用 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 中的文本，但它不起作用，因为文本只是继续通过宽度的高度限制。

编辑：

我已经使用 truncate 方法，但我在 span 元素“消息”中的内容经常重新加载文本，我如何在每次更改时继续截断它？

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

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

已解决：

在下面寻找我的答案。

【问题讨论】：

您能否添加您的声明，包括truncate.js 库
控制台有错误吗？
截断工作，所以我认为我的包含语句没有任何问题，控制台中也没有错误。但是我在编辑中写了另一个问题。
每次内容变化时都需要重新初始化。
我该怎么做？可以举个例子吗？

标签： javascript jquery html text web

【解决方案1】：

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

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

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

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

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

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

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

【讨论】：