javascript - .toFixed() 如果数字对于元素来说太大

Question

在特定组的用户的帐户仪表板上会显示一个唯一的编号。该数字是从数据库中获取并经常更改的。数量小于 10,000,000。

如果元素的宽度开始 chop 文本，那么将数字从“2,643,977”更改为“2.6M”之类的最佳方法是什么，所以假设 100px 可以显示 2,643,977，但会减少到 50px 显示 2.6M？

问题澄清

文本元素是百分比，因此较小的屏幕会削减大量数字。

1. 有没有办法获取内部元素的文本大小？
2. 如果内部文本宽度大于元素宽度，则缩短数字，可以是 1,000 - 1k、1,000,000 - 1m...

Answer 1

您可以使用如下所示的 js 函数来检查您的内容是否太宽，然后使用其他答案中提供的函数之一来缩短它(如果是)。

此函数接受您想要检查的文本、您想要将其限制为 px 的宽度以及您实际元素使用的 css 类(以空格分隔的字符串)。它返回一个 bool 值，指示文本是否适合。

function checkIfFits(text, width, classes) {
  var s = document.createElement("span");
  s.className = classes;
  s.innerHTML = text;
  if (parseInt(s.offsetWidth, 10) > width) return false;
  return true;
}