使用 (this.clientWidth < this.scrollWidth) 在 Firefox 中检测溢出失败

Question

我们正在尝试使用这个简单的 Javascript 代码检测元素是否溢出：

this.clientWidth < this.scrollWidth

这在 Chrome/IE 上完美运行，但在 Firefox 上它会失败，直到溢出太多。

例子可以在这里看到：http://colnect.com/en/coins/countries#-1;yemen 此页面显示国家列表。如果文本适合一行，我们将其垂直居中。如果一行太长（这就是我们要检测溢出的原因），我们会对其进行更改，使文本显示为两行。

在此附件中，您可以看到 Firefox 上发生的情况（取决于 window 的宽度）。当溢出不是 "big enough" 时，它不会被检测到，即使 CSS 已经明确地为它添加了省略号所以它溢出了。显示的前 4 "countries" 个是正确的（第 4 个甚至分成两行）但其他的不是。

要重新创建，只需开始慢慢调整您的 Firefox window 大小，直到您看到中断的地方。

有什么想法吗？检测溢出的不同方法？

Answer 1

我注意到您的网站有两点。您正在使用 white-space:nowrap，并且单元格 class 上有一个 transition: all。我将它们更改为 white-space:normal 并禁用了转换，并且它与包装一起工作得很好。我禁用转换的原因是我发现有时更改文本并将其分成两行需要一些时间:)

试一试，如果可行请告诉我。

Answer 2

...还要记住，溢出元素的省略号可能会强制显示省略号，因为它的宽度可能比最后一个字符大。我遇到过一些情况，没有省略号可以显示整个文本，而使用省略号删除了我的最后一个字符。

Answer 3

请试试这个CodePen sample。

<div id='mydiv'>Some relatively long line of text to test an interesting question about Firefox behavior.</div>
<br><br><br>
<div id='dbgmsg'></div>

#mydiv {
  width: 33%;
  border: solid 1px gray;
  white-space: nowrap;
  overflow: hidden;
}

$(document).ready(function insertAds() {

  function printWidthes(){
    var clientWidth = $('#mydiv').get(0).clientWidth;
    var scrollWidth = $('#mydiv').get(0).scrollWidth;
    $('#dbgmsg').html("clientWidth = " + clientWidth + "<br>scrollWidth = " + scrollWidth);
  }

  $(window).resize(function(){
    printWidthes();
  });

  printWidthes();
});

我已经在 Window 7 上的最新 Firefox 版本 (35.0.1) 上对其进行了测试，它的行为是绝对正确的。当 div 尺寸比文本尺寸小甚至只有一个像素时，那么 clientWidth 就会小于 scrollWidth.

尝试在您的计算机上进行测试；可能是您使用不同的 Firefox 版本导致了问题。顺便说一句，您是否看到调试器/打印中的数字是错误的，或者这只是您的猜测？可能是您的网站因其他原因而无法运行？

Answer 4

我认为这可能与 firefox 中的一个错误（现已解决）有关。也许另一种确定 scrollWidth 和 clientWidt 的方法就是答案（如 why scrollwidth doesnt work 中所述）：

显然，通过在读取之前隐藏元素，scrollWidth 给出了与可见时不同的值。

element=document.getElementById("my_div");
var scrollWidth = $(element).css("overflow", "hidden")[0].scrollWidth;
alert('clientWidt h = ' + element.clientWidth + ',  scrollWidth = ' + scrollWidth  );
$(element).css("overflow", "visible");

Answer 5

试试这个：

如果您想保留全名，那么只需从所选的class或id中删除text-overflow:ellipsis;。

如果你想把名字保留在一行，最后一个位置没有 ...，那么在选择的class中设置white-space: nowrap !important;overflow: hidden;

在我的 Firefox 浏览器中：（居中对齐但没有 text-overflow:ellipsis;）

（居中对齐 text-overflow:ellipsis;）

任选其一

使用 (this.clientWidth < this.scrollWidth) 在 Firefox 中检测溢出失败

Detect overflow fails in Firefox using (this.clientWidth < this.scrollWidth)

javascript

css

firefox

overflow