Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I reduce font size based on length?

Currently I have some large text on a page, and layout works fine for short text (~12-14 chars in length), but any more than that will overflow or wrap. This is undesirable, so I'd like the size to be reduced to fit the whole text.

I've looked into JS solutions like FitText and BigText, but they depend on a fixed width. Since I'm using Bootstrap, I don't have fixed widths.

Okay: http://tf2reputation.com/profile.php?id=76561197960947673
Not okay: http://tf2reputation.com/profile.php?id=76561198054504781

I'v also considered setting white-space: nowrap or truncating, but I'd prefer to show all the text, but smaller, if possible.

like image 259
wmassingham Avatar asked Jun 04 '14 04:06

wmassingham


People also ask

How do I control text size?

To make your font size smaller or larger: On your device, open the Settings app. Search and select Font size. To change your preferred font size, move the slider left or right.

How do I shrink the font size?

To change your display in Windows, select Start > Settings > Accessibility > Text size. To make only the text on your screen larger, adjust the slider next to Text size. To make everything larger, including images and apps, select Display , and then choose an option from the drop-down menu next to Scale.

How do I automatically adjust font size in HTML?

The font-size-adjust property gives you better control of the font size when the first selected font is not available. When a font is not available, the browser uses the second specified font. This could result in a big change for the font size. To prevent this, use the font-size-adjust property.


1 Answers

FitText does work with a fluid width.

From the github page :

Make sure your container has a width! display: inline elements don't have a width. Use display: block OR display: inline-block+ a > specified width (i.e. width: 100%).

Bold is mine for emphasis.

Looking on the homepage for FitText also reveals that there are no fixed width units in sight.

I should also mention that there is not a native CSS technique to achieve this. The closest thing would possibly be viewport relative lengths but that doesnt solve your problem.

My additional opinion (danger beware) : In my experience when you are confronted with a problem like this, its because you may be looking at things a little wrong from the design side, And if you require Javascript for your layout to stay intact, I do think that needs to be reconsidered. Nursing a design along is usually better than banging it into place with a crowbar. End Opinion

like image 160
Gambo Avatar answered Oct 01 '22 17:10

Gambo