Avoid line break resizing font-size

HTML & CSS
1

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.

2

Did you tried Font-size: calc() … ??

1 Like
3

No, but it could work if the problem is not a screen responsiveness, but a text amount?
What code should I use?

4

Usually when people ask these types of questions they are making basic responsive design mistakes and putting appearance above substance. :slight_smile:

Text needs to flow freely and not be constrained. That’s the challenge :slight_smile:

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
5

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
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.