JS CSS线夹重置(TextOverflowClamp.JS）

JS CSS line clamp reset (TextOverflowClamp.js)

本文关键字：JS TextOverflowClamp CSS      更新时间：2024-01-03

我正在使用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);
  });
}

我似乎找不到一个合适的TextOverflowClamp.js站点。然而，仔细阅读代码本身，似乎传递0作为第二个参数应该会删除截断（不清楚这是否是故意的，但似乎有效）。然而，如果最初有任何内部元素，这些元素就会丢失，不会被保留。在您的例子中，它只是文本，所以应该很好：

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/

相关文章：