1

I am running into a few situations where I have a word that is larger than its containing div. Take a look at the screenshot below:

Example Screenshot

What I would like to happen is when a word is too large to fit within its containing div it would reduce the size until it fits. Using the screenshot above I would want it to look like this when resized:

Example Screenshot

How do I do this?

I read about Viewport Sized Typography but it doesn't scale in relation to the div. How do I create scalable fonts in relation to the div?

I prefer a CSS only solution but if JS is the only way then I will accept that answer.

L84
  • 45,514
  • 58
  • 177
  • 257

1 Answers1

1

I've never seen a pure CSS solution to this, but I've seen a few JS solutions:

Auto-size dynamic text to fill fixed size container

You could try FitText.js

Community
  • 1
  • 1
CodingWithSpike
  • 42,906
  • 18
  • 101
  • 138
  • Thanks for the links, I will look at them. Wish someone would propose (and be implemented by all browsers) a new font-size unit similar to viewport size but to fit the containing div. – L84 Oct 10 '14 at 00:03