Question

我之前曾问过类似的问题，但没有提供足够的背景信息。因此，我收到了一个优秀，技术上正确的答案，但没有解决我的问题。

我也在Stack上四处看看，但对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类 all 时，文本将一起存储，然后在使用类时吐出。

这是问题的一个问题：

http://jsfiddle.net/1ddxtpke/

我需要单独存储每个.js-text文本，以便我可以在大型项目中使用此jQuery代码段，并且如果用户要扩展其浏览器窗口大小，则将截断文本的所有实例反馈到DOM中

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

提前感谢您解决我的问题。我希望我能够在我正在寻找的内容方面做得足够具体。

Answer 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)*$/, '...');
      });
    }
});

它有一个问题--.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)*$/, '...'));
       }
    });
});

Answer 2

我看到了两种方法：

1）在需要时将全文存储为属性。有了这个，你的文本将保留你的div，并可以通过简单的.attr。

进行扩展

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

Answer 3

你的职能syntax error

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)*$/, '...');
      });
    }
});

演示链接http://jsfiddle.net/1ddxtpke/2/

jQuery商店.each（）。text（）可以截断吗？

3 个答案: