.toFixed（）数字（如果元素太大）

Question

There is a unique number displayed to users of particular groups on their account dashboard. This number is fetched from the database and changed frequently. The number is less than 10,000,000.

What would be the best way to change the number from let's say "2,643,977" to the likes of "2.6M" if the width of the element starts to cut off the text, so lets say 100px can show 2,643,977, but reduced to 50px it shows 2.6M?

Question Clarification

The text element is a percentage, therefore smaller screens will cut of large numbers.

1. Is there a way obtain the inner elements text size?
2. On this inner text width being greater than element width, shorten the number, be it 1,000 - 1k, 1,000,000 - 1m...

Answer 1

You could use a js function like the following to check if your content is too wide, then use one of the functions provided in the other answers to shorten it if so.

This function accepts the text you want to check, the width you want to constrain it to in px, and the css classes your actual element uses (in a space-separated string). It returns a bool indicating whether the text fits.

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;
}

Answer 2

How about this:

n2Display = (n<1000000) ? n : (n/1000000).toFixed(1) + 'M';

I'm assuming that n is a number, not a string here

Answer 3

function shorten(n){
  var l=Math.floor(n.length/3-1);
  return n.slice(0,n.length-l*3)+["","k","M","B"][l];
}

alert(shorten("123456"));
alert(shorten("123456789123"));

Note that this requires a String from Int to be passed.

It simply cuts off every block of 3 numbers and replaces it with its shortform:

123,456 => 123k
123,456,789 => 123M