Jquery 多行文本截断问题

我目前有一个jQuery片段，当子字符串大于父容器时，它成功地截断了我的文本（见下文）

我已经使用了我的语义，正如我计划在现有标记中的多个位置使用这个小小的jQuery组件一样：

<div class="existing-first-div-container js-text-truncator">
  <p class="existing-first-string js-text">The quick brown fox</p>
</div>
<div class="existing-second-div-container js-text-truncator">
  <p class="existing-second-string js-text"> jumped over the lazy red dog.</p>
</div>

快速棕色狐狸

跳过了懒惰的红狗

如果你已经读了这么多，并且已经猜到了我的问题，那就太好了

所以问题是，我的jQuery存储的是文本，但它存储的是所有文本。因此，这两个现有的div都被截断了，但最终都读到了“敏捷的棕色狐狸跳过了懒惰的红狗”，而不是第一个读到了“敏捷的棕色狐狸”和第二个读到了“跳过了懒惰的红狗”

---

是否可以按照我的意愿使用我的js文本截断器作为标记的扩展，而不同时存储所有截断的文本实例？

。text

明确指出

获取匹配元素集中每个元素（包括其子元素）的组合文本内容，或设置匹配元素的文本内容

使用

.js text

创建元素集后，对它们执行

.each

，然后分别获取、截断和设置

.text

如果希望在窗口重新调整大小时重新运行，我建议您通过超时来执行此操作（因此，在窗口停止调整大小至少400ms后，代码将运行一次）。如果没有这种变通方法，它往往会对性能造成很大影响

var resizeTimeout = false;
$(window).resize(onWindowResize); // bind resize event.

trimAllText(); //run once at start.

function onWindowResize() {
    if(resizeTimeout){
        clearTimeout(resizeTimeout);
    }
    resizeTimeout = setTimeout(function(e){ 
        resizeTimeout = false; 

        // this is code that is ran at the "end" of a resize.
        trimAllText();
    }, 400);
}

function trimAllText(){
  var initialElements = $('.js-text');
  initialElements.each(function(){
    var elem = $(this);
    while(elem.outerHeight() > elem.closest('.js-text-truncator').height()) {
      elem.text(function(index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
      });
    });
  });
}

---

谢谢，这将截断这两个。但我可能没有给出足够的细节。。。在调整浏览器窗口时，这不会存储或添加/删除文本：如果要在窗口上调整文本大小，可以将相同的函数绑定到。调整大小：）请给我一点时间将其添加到答案中。您好，您的第一个解决方案是在没有400毫秒延迟的情况下成功动态修剪文本。但是，如果你把浏览器的大小调整得更大，它仍然不会再添加文本。我怀疑这是因为我们最初没有存储每个文本？我会勾选你的答案，因为你已经从技术上回答了我的问题。但如果你有更多的想法，那就太棒了；）啊，对了，我错过了重新添加它的想法！在第一次替换原始文本之前，可以使用属性将原始文本存储在标记中，例如

data init=“put initial text here”

。或者，您可以计算包含元素和初始文本的对象数组

var inits=[{elem=$（'some$obj'），text=“$（'some$obj'）。text（）”}，…]

var resizeTimeout = false;
$(window).resize(onWindowResize); // bind resize event.

trimAllText(); //run once at start.

function onWindowResize() {
    if(resizeTimeout){
        clearTimeout(resizeTimeout);
    }
    resizeTimeout = setTimeout(function(e){ 
        resizeTimeout = false; 

        // this is code that is ran at the "end" of a resize.
        trimAllText();
    }, 400);
}

function trimAllText(){
  var initialElements = $('.js-text');
  initialElements.each(function(){
    var elem = $(this);
    while(elem.outerHeight() > elem.closest('.js-text-truncator').height()) {
      elem.text(function(index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
      });
    });
  });
}