Change font size according to length of text

Question

I have some square table cells (arranged in 5x5 matrix) that change size depending on the resolution of the screen and depending on the orientation. Their height (and width) could be as low as 76px and as high as 182px ( I think this range could be different depending on screen it is shown on).

Here's the problem. I am putting country names inside these boxes and they could be short 5 letter words such as "Italy" or they could be long names such as "Afganisthan". Is there a way, using JQuery (since that is what I am using to determine the screen size) to alter the font size so that the word makes full use of the space available? Country names could be made of multiple words such as "Antigua and Barbuda". In this case I only care about the longest word in the name since it is OK to wrap the text. I already have a function in the C# code behind that detects the longest word in the string, but I don't know how to use that information to affect the JQuery function that would resize the text.

It is important that the code is client side since the user might decide to rotate their device and I would like the text resizing to occur without sending a server request.

Thanks!

Answer 1

This could be a useful read css-tricks Instead of counting the words, use string length property.