0

I would just like a div, in the center of the page, that contains one line (two words) of h1 text, and that text is justified to the length of the div; meaning, the letters space out (while maintaining their size) to occupy the entire width of the div, and do not go outside the div. And, if I change the browser settings to shorten the width of the page (such as zoom in), the letters will condense (to a point, before breaking up to two lines).

I cannot realistically list all the things I have tried, to no avail. Which includes all the suggestions I have seen on this site to date.

Is it really that complicated? Or am I just missing something obvious?

Please, please help.

I apologize for the "subjective nature" of this request.

bloomers
  • 255
  • 4
  • 12
  • 1
    Maybe I'm dumb, but this is the best I could come up with without using `@media` queries at specific breakpoints to separate the elements and have them break to 2 lines at a narrow width. https://codepen.io/anon/pen/awpZvB – Michael Coker Jun 16 '17 at 22:32
  • Possible duplicate question: https://stackoverflow.com/questions/4355009/css-text-justify-with-letter-spacing – Ryan Jun 16 '17 at 22:57
  • @MichaelCoker I suppose I could do that. I guess I was just hoping for something that I wouldn't have to alter if I add another word. But thanks. – bloomers Jun 16 '17 at 23:11
  • @bloomers you bet. I would probably do this with javascript tho, and have javascript do all the work so the html would just be a tag with words. – Michael Coker Jun 16 '17 at 23:19

1 Answers1

0

So you want the font size to change depending on window width?

In CSS, you can use the vw unit for font-size, so that would respond to the window width, but requires some trial-and-error, I guess.

Apart from that, there's a javascript plugin named fittext (http://fittextjs.com/) which does what you want. I used it on one website and it works quite reliably,

Johannes
  • 64,305
  • 18
  • 73
  • 130