I wonder how I could avoid a line-break in my page title (h1) resizing the font-size, only if the text is too long to be contained in a line, using pure css.
Indeed I know that
- using
white-space: nowrap; I can avoid line-break, but in this way a long text could not be wholly visible
- using
font-size: [somevalue]vw I can avoid line-break, but reducing all the titles in all my webpages, while I need to reduce the font only in pages with a long title
I saw a jquery solution (not yet tried) on Stak Overflow, but, if it would be possible, a pure css solution would be better.
Thank you!
EDIT
I tried the above jquery solution, but unsuccessfully.
Did you tried Font-size: calc() … ??
1 Like
No, but it could work if the problem is not a screen responsiveness, but a text amount?
What code should I use?
Usually when people ask these types of questions they are making basic responsive design mistakes and putting appearance above substance. 
Text needs to flow freely and not be constrained. That’s the challenge
Your design should not be so rigid that text wrapping breaks it.
However there are a few use cases where text wrapping is undesirable but you must ensure it’s still readable.
With those caveats out the way you could stick the text in a svg and it will scale to fit with a few magic numbers.
Therese a good rundown of methods at css tricks including the svg hack.
2 Likes
Yes, probably you are right. There are only some webpages that seems need what I’m asking for, but it is always possible to reduce the amount of text.
Maybe another solution could be to add a class only for these titles.
Tank you!
1 Like