javascript - 使段落文本适合 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%(垂直)的幻灯片区域。字体大小无关紧要。

为此，我有一个占幻灯片区域 40% 的 div。我希望 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/