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（段落文本）的内容以font-size增长到大约适合这个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/

适合段落文本到div

1 个答案: