How can I use css or javascript to change font-size of a heading automatically if it is too big for the page? For example a heading such as "Local company sells stock" would be fine but a title such as "Local startup saves marriages one box at a time" would be too big to fit on the page. I am allowing users to enter blog posts through a form and cannot always anticipate how long their personal title will be to use css to format it correctly.
Asked
Active
Viewed 27 times
0
-
Please specify what you mean by ‘too big to fit on the page’: The headline is not supposed to line-break? – dulange Mar 11 '19 at 22:08
-
Maybe do you want something like this? https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container – FonzTech Mar 11 '19 at 22:16
-
Use `vw` measure in CSS. – Randy Casburn Mar 11 '19 at 22:17
-
You can see how to do it [here](https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container), but you probably shouldn't do that for this example. It would be better to have the title wrap to another line, or you could use JS to check the title for a certain `length()`, and when it hits that limit, cut the rest of the title until they click to view the full post. With a flexible title, your users could really abuse this, even unintentionally. – Nick Mar 11 '19 at 22:23