How to reduce the font size in length?

Question

I currently have large text on the page, and the layout is great for short text (~ 12-14 characters long), but more than it will overflow or wrapper. This is undesirable, so I would like to reduce the size to fit the entire text.

I studied JS solutions like FitText and BigText, but they depend on a fixed width. Since I use Bootstrap, I do not have a fixed width.

Good: http://tf2reputation.com/profile.php?id=76561197960947673
Failed: http://tf2reputation.com/profile.php?id=76561198054504781

I also considered setting white-space: nowrap or truncation, but I would prefer to show all the text, but if possible less.

Answer 1

FitText works with fluid width.

On github page:

Make sure your container is wide! display: inline elements have no width. Use display: block OR display: inline-block + a> specified width (i.e. Width: 100%).

Bold is my attention.

Looking at the homepage , FitText also shows that there are no fixed width blocks in the field of view.

I should also note that for this there is no proprietary CSS technique. The closest thing may be the relative length of the viewport , but this does not solve your problem.

My additional opinion (beware of danger): In my experience, when you encounter such a problem, this is because you can look at things a little incorrectly from the design side. And if you require Javascript so that your layout remains intact, I do think what needs to be reviewed. Caring for a design is usually better than hitting it with a crowbar. Final opinion

Answer 2

You can try an iterative approach using javascript.

Put content in a range with white-space: nowrap . If span is an interval inside, you can do something like this:

 var maxWidth = span.parentNode.clientWidth; var currentFont = parseInt(window.getComputedStyle(span).fontSize); // or max font size while(span.offsetWidth > maxWidth) { currentFont--; span.style.fontSize = currentFont + "px"; } 

This will constantly reduce the font until the range is placed in its parent element.

If the selected width changes when the window is resized, you may need to run this when the window is resized.