使段落文本適合div

Question

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>

我正在使用網絡應用制作人造幻燈片，在那里我需要一個問題來准確填充（垂直）大約40％的幻燈片區域。 字體大小無關緊要。

為此，我有一個div占據了幻燈片區域的40％。 我希望div（段落文本）的內容以字體大小增長，以便恰好適合該div（這樣，如果增加1px，將導致溢出）。

我遇到過很多解決方案，它們只針對一行文本，而沒有針對段落文本的解決方案。 什么是進行此操作的好方法？

Answer 1

這應該工作。 使用jQuery，您可能會question直到它填滿所需的大小為止。

首先，將.question括在父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>

其次，像這樣編輯CSS：

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

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

現在，使用此函數（請記住我們正在使用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"});
}

看到它正常工作： http : //jsfiddle.net/8jB4j/3/