CODEWITHSUNDEEP
javascript
peteykun
peteykun

Reputation: 716

Fit paragraph text to div

JSFiddle: http://jsfiddle.net/8jB4j/2/

<div class="question" data-next-url="/questions/2">
  A fisherman&#39;s day is rated as good if he catches 9 fish, fair if he catches 7 fish and bad if he catches 5 fish. He catches 53 fish in a week and claims that he had all of good, fair and bad days in the week. So how many good, fair and bad days did the fisherman have in that week?
</div>

<div class="options">  
  <div class="option" data-correct="true">
    (4, 1, 2)
  </div>

  <div class="option" data-correct="true">
    (3, 3, 1)
  </div>
</div>

I'm making a faux slideshow using a web app, where I need a question to exactly fill about 40% (vertically) of the slide area. The font-size is immaterial.

For this, I have a div that takes up 40% of the slide area. I wish the contents of the div (paragraph text) to grow in font-size to just about fit this div (such that a 1px increase will result in an overflow).

I have come across many solutions that take care of this for one line of text, but none for paragraph text. What would be a good way to go about doing this?

Upvotes: 1

Views: 1256

Answers (1)

ojovirtual
ojovirtual

Reputation: 3362

This should work. Using jQuery you could grow you question until it fills the desired size.

First, enclose the .question inside a parent div:

<div id="theParent">
<div class="question" data-next-url="/questions/2">
  A fisherman&#39;s day is rated as good if he...
</div>
</div>

Second, edit your CSS like this:

#theParent{
    height:40%;
    overflow: hidden;
}

.question {
  height: auto;
  padding: 2% 5% 5% 5%;
  font-size: 1em;
}

Now, use this function (remember we are using jQuery):

function() resizeTheQuestion{
   var base=1;
   var inc=0.1;   
   while ($(".question").outerHeight() < $("#theParent").height())
   {
       $(".question").css({"font-size":(base+inc)+"em"});    
       inc+=0.1;
   }
    inc-=0.1;
    $(".question").css({"font-size":(base+inc)+"em"});
}

See it working: http://jsfiddle.net/8jB4j/3/

Upvotes: 3

Related Questions