Bootstrap 和 JS - 如何在有限的 <div> 空间中容纳大量数字

Question

我试图在单元格中显示一个数字，该数字可以从非常小到巨大不等，例如 3.3078854415193856e+107。但正如您在下面看到的，它们超出了单元格的限制。

这是数字所在的代码：

>   <div class="col-sm-6 my-col" align="center">

>        <text class="my-text-topdashboard-value"> id="id-topdashbaord-value2">5040</text>

>   </div>

有没有办法自动修复数字的大小，使其永远不会高于预定义的字符数或 Flex 列中的当前可用空间？也就是当数字太大时，它会自动在末尾添加 e+xx。

例如（还有逗号千位分隔符......）

• 5,040

• 40,320

• 479,001,600

• 8.68331176e+36

• 9.23564546e+107

Answer 1

对所有值使用 javascript 方法 toPrecision() (100000000000).toPrecision(3)返回字符串：“1.00e+11”(1000000).toPrecision(3)返回：“1.00e+6”和(5040).toPrecision(3)返回：“5.04e+3”ETC..其中传递的值：3，是您想要的精度 - 您可以使用它来获得最适合您的值。那么您的大部分号码将以较小的长度变化绘制。