0

I have a div that has a couple of p tags in it.

<div id="myDiv">
    <p>abcdefgh ijkl mnop</p>
    <p>qrst uvwxyz</p>
</div>

And the CSS

div#myDiv{
    display: inline-block;
}

div#myDiv p{
    padding: 0;
    height: 100px;
    min-width: 250px;
    line-height: 100px;
    background: Green;
    font-size: 5em;
}

Here is a FIDDLE

In the fiddle I've manually put font-size to 5em which kind of expands the text inside the p tags to the full height of the paragraph. What I'd like to have is to set it so that it expands and shrinks according to the height and width of the p tag and adjusts itself to cover the full height. I tried % font-size but that doesn't work (which is essentially em anyway, right?). Also tried pixels but that again would be fixed not fluid.

Any ideas fellow programmers and designers?

reggaemahn
  • 6,272
  • 6
  • 34
  • 59
  • You want the text to be the same height as the wrapper element, or fit the width? Setting it based on the height means it will likely wrap (thus being bigger than the wrapper anyway). – robooneus Sep 02 '13 at 15:15
  • See [here](http://stackoverflow.com/questions/8990999/have-text-scale-up-in-size-to-fit-the-container) and [here](http://stackoverflow.com/questions/4408937/font-size-auto-adjust-to-fit?lq=1) – Xareyo Sep 02 '13 at 15:18
  • @robooneus Basically first fit the width and then expand to the maximum height it can based on that width. – reggaemahn Sep 02 '13 at 15:23
  • Check out this plugin, then... http://fittextjs.com/ It seems to do what you are looking for. – robooneus Sep 02 '13 at 15:24
  • @robooneus Thank you for the comment. But I am looking for a js free solution. Plus on the homepage for the plugin it says "Oh, and don't you dare let us catch you using FitText on paragraph text. This is for gigantic display text only!". :) – reggaemahn Sep 02 '13 at 15:27
  • Makes sense, but what you describe is (I am quite sure, but would be great if I am wrong) just not possible with just CSS. Best of luck and I hope I am wrong :) – robooneus Sep 03 '13 at 09:13

1 Answers1

0

You can change the fontsize to fit for certain viewports, however it wont be exactly what you are looking for.

div#myDiv p{
  font-size: 5em;
}

@media(max-width: 767px){
  //if the width of the screen is lower than 767px
  div#myDiv p{
    font-size: 4em;
  }
}

@media(max-width: 500px){
  div#myDiv p{
    font-size: 3em;
  }
}

@media(max-width: 400px){
  div#myDiv p{
    font-size: 2em;
  }
}
Razz
  • 3,995
  • 1
  • 18
  • 15