Bootstrap и JS - Как разместить большое число в ограниченном <div>пространстве

Question

Я пытаюсь отобразить число в ячейке, это число может варьироваться от очень маленького до гигантского c, например, например, 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 в конце.

Например (с разделителями запятых тысяч ...)

• 5040
• 40,320
• 479,001,600
• 8,68331176e + 36
• 9,23564546e + 107

Answer 1

используйте метод javascript toPrecision () (ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Number/toPrecision) для всех ваших значений:

(100000000000).toPrecision(3)

возвращает строку: "1.00e + 11"

(1000000).toPrecision(3)

возвращает: «1,00e + 6»

и

(5040).toPrecision(3)

возвращает: «5,04e + 3»

et c ..

где переданное значение: 3 - это требуемая точность - вы можете поиграть с этим, чтобы получить значение, которое подходит вам лучше всего.

, тогда большинство ваших чисел будут нарисованы с меньшим изменением длины.