Javascript jQuery store.each（）.text（）是否可以进行截断？

我以前也问过类似的问题，但没有给出足够的上下文。结果，我得到了一个极好的、技术上正确的答案，但并没有解决我的问题

我还查看了堆栈，但对jQuery了解不够，无法找到答案

我需要用jQuery截断多行文本。当浏览器窗口展开和收缩时，代码还需要添加/删除文本。因此，从我的理解来看，代码需要在截断文本之前存储文本，以便在浏览器窗口展开时将文本添加回

最初，这段代码解决了我的问题：

$(function () {
  var initial = $('.js-text').text();

  $('.js-text').text(initial);
  while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
    $('.js-text').text(function(index, text) {
      return text.replace(/\W*\s(\S)*$/, '...');
    });
  }

  $(window).resize(function() {
    $('.js-text').text(initial);
    while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
      $('.js-text').text(function(index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
      });
    }
  });
});

当我在一个页面上多次使用这些.js类时，所有文本都存储在一起，然后在每次使用这些类时都会吐出，这段代码不再像这样进行剪切

以下是问题的一部分：

我需要分别存储每个

.js text

文本，这样我就可以在一个大型项目中使用这个jQuery代码片段，并且如果用户要扩展其浏览器窗口大小，就可以将所有被截断文本的实例反馈到DOM中

这可能吗？如果是，我会怎么做

---

提前谢谢你回答我的问题。我希望我在寻找什么方面已经足够具体。

我看到了两种方法：

1） 在需要时将全文存储为属性。这样，您的文本将保留在div中，并可以在使用简单的.attr进行扩展时检索

---

2） 将文本存储在数组中，并将索引作为属性存储在div上。这种方法可能比以前的方法效率更高，因为我不确定属性值的最大长度是多少。

我看到了两种方法：

1） 在需要时将全文存储为属性。这样，您的文本将保留在div中，并可以在使用简单的.attr进行扩展时检索

---

2） 将文本存储在数组中，并将索引作为属性存储在div上。这种方法可能比以前的方法效率更高，因为我不确定属性值的最大长度是多少。

有几种方法可以做到这一点。您可以将其存储在阵列中：

var initialValues = [];

// Save the initial data
$('.js-text').each(function () {
   initialValues.push($(this).text());
});

// On start
while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
    $('.js-text').text(function(index, text) {
      return text.replace(/\W*\s(\S)*$/, '...');
    });
}

// When the window gets resized
$(window).resize(function() {
    $('.js-text').text(function () { return initialValues[$('.js-text').index($(this))]; });
    while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
      $('.js-text').text(function(index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
      });
    }
});

但是它有一个缺点-不能删除或移动.js文本元素，因为它会破坏排序。这需要另一个功能来重置订单，以防发生变化

我还没有测试过它，但原则上它应该是这样工作的

编辑：好的，我重新修改了一下，结果如下：

var initialValues = [];

// Save the initial data
$('.js-text').each(function () {
   initialValues.push($(this).text());
   while ($(this).outerHeight() > $(this).parent().height()) {
    $(this).text($(this).text().replace(/\W*\s(\S)*$/, '...'));
   }
});

// When the window gets resized
$(window).resize(function() {
    $('.js-text').each(function (index) {
       $(this).text(initialValues[index]);
       while ($(this).outerHeight() > $(this).parent().height()) {
        $(this).text($(this).text().replace(/\W*\s(\S)*$/, '...'));
       }
    });
});

---

有几种方法可以做到这一点。您可以将其存储在阵列中：

var initialValues = [];

// Save the initial data
$('.js-text').each(function () {
   initialValues.push($(this).text());
});

// On start
while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
    $('.js-text').text(function(index, text) {
      return text.replace(/\W*\s(\S)*$/, '...');
    });
}

// When the window gets resized
$(window).resize(function() {
    $('.js-text').text(function () { return initialValues[$('.js-text').index($(this))]; });
    while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
      $('.js-text').text(function(index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
      });
    }
});

但是它有一个缺点-不能删除或移动.js文本元素，因为它会破坏排序。这需要另一个功能来重置订单，以防发生变化

我还没有测试过它，但原则上它应该是这样工作的

编辑：好的，我重新修改了一下，结果如下：

var initialValues = [];

// Save the initial data
$('.js-text').each(function () {
   initialValues.push($(this).text());
   while ($(this).outerHeight() > $(this).parent().height()) {
    $(this).text($(this).text().replace(/\W*\s(\S)*$/, '...'));
   }
});

// When the window gets resized
$(window).resize(function() {
    $('.js-text').each(function (index) {
       $(this).text(initialValues[index]);
       while ($(this).outerHeight() > $(this).parent().height()) {
        $(this).text($(this).text().replace(/\W*\s(\S)*$/, '...'));
       }
    });
});

---

您的函数1

语法错误

var initialValues = [];

// Save the initial data
    $('.js-text').each(function () {
        initialValues.push($(this).text());
    });

// On start
    while ($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
        $('.js-text').text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }

// When the window gets resized
$(window).resize(function() {
    $('.js-text').text(function () { return initialValues[$('.js-text').index($(this))]; });
    while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
      $('.js-text').text(function(index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
      });
    }
});

---

演示链接

您的函数一

语法错误

var initialValues = [];

// Save the initial data
    $('.js-text').each(function () {
        initialValues.push($(this).text());
    });

// On start
    while ($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
        $('.js-text').text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }

// When the window gets resized
$(window).resize(function() {
    $('.js-text').text(function () { return initialValues[$('.js-text').index($(this))]; });
    while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
      $('.js-text').text(function(index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
      });
    }
});

---

---

演示链接

很遗憾，我没有时间去弄清楚，但我认为你根本不需要JS来做这件事。这可以使用

文本溢出

进行纯CSS管理。看看这里的例子：。我建议使用一个已经实现了这一点的插件。我在@Quentin上取得了成功，谢谢你的选择。我会调查的。如果可能的话，我非常想用jQuery代码片段的一个变体来解决这个问题。我非常同意昆汀的观点。如果你这样做只是为了教育目的，我想你可以用javascript来做，但是几行CSS应该是显而易见的选择。@Daniel B干杯——我理解在这种情况下CSS比JS的好处。但现在我已经走了JS路线，我决定无论如何都要找到答案。不幸的是，我没有时间去弄清楚，但我认为你根本不需要JS来做这件事。这可以使用

文本溢出

进行纯CSS管理。看看这里的例子：。我建议使用一个已经实现了这一点的插件。我在@Quentin上取得了成功，谢谢你的选择。我会调查的。如果可能的话，我非常想用jQuery代码片段的一个变体来解决这个问题。我非常同意昆汀的观点。如果你这样做只是为了教育目的，我想你可以用javascript来做，但是几行CSS应该是显而易见的选择。@Daniel B干杯——我理解在这种情况下CSS比JS的好处。但是现在我已经走了JS路线，我决定无论如何都要找到答案。谢谢你这么快的回复。关于选项2，我不太熟悉数组的使用。在这种情况下，代码会是什么样子？你介意带我看看我的JSFIDLE吗？谢谢你这么快的回复。关于选项2，我不太熟悉数组的使用。在这种情况下，代码会是什么样子？你介意带我看看我的JSFIDLE吗？这看起来很棒，感觉不错。不过，在这个JSFIDLE中，它的触发效果并不太好：。有什么想法吗？@DanMad只是一个语法错误和其他一些东西。检查更新的解决方案-

.js text

现在应该是

.js text truncator

的直接子级，如果有问题，只需将

$（this）.parent（）.height（）

更改为相应的选择器即可。这非常好；正是我需要的。感谢您使用timeHi@fiedlr，此解决方案实际上导致我的浏览器超时，无法正确加载页面。你能解释一下问题是什么吗？当我只截短一段文本时，页面会立即加载。但是，一旦我第二次添加.js类并尝试重新加载页面，页面就会超时，永远不会加载……这看起来很棒，感觉不错。不过，在这个JSFIDLE中，它的触发效果并不太好：。有什么想法吗？@DanMad只是一个语法错误和其他一些东西。检查更新的解决方案-

.js text

现在应该是直接子级