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

Question

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

this.clientWidth < this.scrollWidth

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

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

在此附件中，您可以看到 Firefox 上发生的情况(取决于窗口的宽度)。当溢出不是“足够大”时，即使 CSS 已经明确地为它添加了省略号，它也不会被检测到，所以它会溢出。显示的前 4 个“国家”是正确的(第 4 个甚至分成两行)，但其他国家不是。

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

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

Answer 1

试试这个:

如果您想保留全名，只需从所选类或 ID 中删除 text-overflow:ellipsis;。

如果你想将名称保留在一行中并且没有 ... 在最后一个位置，然后设置 white-space: nowrap !important;overflow:隐藏; 在选定的类中

在我的 Firefox 浏览器中:(居中对齐且没有 text-overflow:ellipsis;)

(居中对齐并使用 text-overflow:ellipsis;)

您可以选择任何一个。