Is the font size adjustable for long words?
I have a <H1> tag with a set font size that works and looks decent most of the time.
Only sometimes does the client type incredibly lengthy words that shouldn't be broken and shouldn't disrupt the layout.
I am aware that I could use a PHP function to count characters for a word and add a sub-css class for long words.
To avoid using JS or PHP, I'm simply asking if this is doable with CSS alone. Thanks
3 Replies
CSS doesn't have that ability currently, no. Well, mostly not. If it's a page title you could use
vw as your font size so it scales with the size of the viewport…but then you get weird cases where overly-long titles get too small to read. Same with small screen sizes.
You could do something like this:
2rem is pretty standard for h1 font sizes, so I made the minimum a bit smaller just in case. Adjust the middle value as-needed to make it work. Of course, this won't be dynamic to adjust based on the length of the current h1, though. So you'll probably want to reach for some simple JS to adjust the font-size after the page loads.You can set Hyphens to none. That will prevent all words from being hyphenated.
You can also use the hypnenate-limit-char to control the min number of character before and after the hyphen.
You may also be able to do this with the new @container. I am thinking if you set the width to max-content and then adjust the font based on the container size. I haven't tested that approached.
The problem is really on mobile - as some worlds are really long and breaks are not always good. They have mainly medical terms.
I guess my php function is sofar a pretty good solution.