javascript - JS CSS 线夹重置 (TextOverflowClamp.js)

Question

我正在使用 TextOverflowClamp.js 尝试对一些文本进行线夹。它在减小窗口宽度时起作用，但在增加窗口宽度后不会重置。有人可以在夹具被触发并且窗口宽度大于设置的条件尺寸后帮助重置线夹具吗？

Codepen

所有代码都在 Codepen 中，但我的调整大小和加载函数在这里:

var winWidth;
$(window).resize(function () {
  winWidth = $(window).width();
  if (winWidth <= 991) {
    loadClamp();
  }
  else {
    // reset line clamp code here
  }
}).resize();

function loadClamp() {
  $(window).on('resize', function() {

    // TextOverflowClamp.js
    clamp(document.getElementById('js-toclamp1'), 1);

  });
}    

Answer 1

我似乎无法为 TextOverflowClamp.js 找到合适的站点。然而，通读代码本身，似乎将 0 作为第二个参数传递应该删除 chop (不清楚这是否是故意的，但它似乎有效)。但是，如果最初有任何内部元素，这些元素就会丢失并且不会保留。对于您的示例，它只是文本，所以应该没问题:

var winWidth;
$(window).resize(function () {
    winWidth = $(window).width();
    if (winWidth <= 991) {
        loadClamp(1);
    }
    else {
        // back to normal
        loadClamp(0);
   }
}).resize();

function loadClamp(lines) {
    clamp(document.getElementById('js-toclamp1'), lines);
}

关于您的代码的一些附加说明。每次调用 loadClamp 时，您都在添加一个额外的 resize 处理程序，实际上没有理由这样做。我删除了那个。

此外，将 TextOverflowClamp 代码放在您自己的代码之前也很重要。

http://jsfiddle.net/w9nkad0u/