Is it possible to change font size if height of the box is too big with only CSS

Asked Jul 18 '15 at 10:46

Active Jul 20 '15 at 09:40

Viewed 49 times

I have some title absolutly positioned over an image and for some articles it gets too big and overflows, which looks ugly.

I wonder if it is possible to use @media(max-height:200px) that usually refers to the viewport, to refer to an element, and change its style when the box gets too big.

My first thought was "this is not possible", but seems to be always a way to do stuff when you ask to the right person.

EDIT: For a more concrete understanding: I have an h2 with font-size: 2em, and I'd like to make it 1.5em, if the text is longer than 2 lines.

edited Jul 20 '15 at 09:40

asked Jul 18 '15 at 10:46

Vandervals

5,774
6
48
94

Javascript could be a option – pbaldauf Jul 18 '15 at 10:55
I know I could do it with JS, but I wonder if there is a creative way to do this even if it is not 100% reliable – Vandervals Jul 18 '15 at 10:57
Have you already tried the break the words in a new line. Eg with `word-break`/`word-wrap` CSS-properties. – pbaldauf Jul 18 '15 at 11:00
An image showing the issue would be helpful. I suspect absolute positioning and word-wrap may offer a suitable solution. – James Coyle Jul 18 '15 at 11:16
1

Simply...no. Element based media queries don't exist yet so JS is the only option here. – Paulie_D Jul 18 '15 at 11:35
Could you please provide a code with html and css? – Nursultan Zarlyk Jul 18 '15 at 12:03
What style would you want to change it to? – Donnie D'Amato Jul 18 '15 at 12:48
I have an h2 with font-size: 2em, and I'd like to make it 1.5em, if the text is longer than 2 lines – Vandervals Jul 18 '15 at 17:00
For the javascript option, I answered a similar question here: http://stackoverflow.com/questions/30940499/text-size-auto-resizing-on-div-width/30960832#30960832 – m69's been on strike for years Jul 18 '15 at 23:05

Is it possible to change font size if height of the box is too big with only CSS

0 Answers0