javascript - 强制子 div 中的文本适合父级

Question

我的 HTML 代码中有两个 div 标签，如下所示

<div id="parent">
    <div id="child">
        <p class="child-text"> ..... </p>
        <a class="child-link"> ..... </a>
        <p class="child-text"> ..... </p>
    </div>
</div>

#parent{ height: 400px; width:100px}

如何强制#child div 的内容垂直 适合父div？我正在寻找可以获取子 div ID 并动态调整其内容大小的东西。我曾使用过 jQuery.fittext。但是，它获取的是 child-text 类 ID 而不是 child div id。换句话说，它不够智能，无法识别 child div 中的内容，然后重新缩放它们。

还有其他选择吗？

Answer 1

你可以这样做:

var fontsize = 10;
while($('#child').height() <= $('#parent').height()){
    fontsize = fontsize +1;
    $('#child').css('font-size',fontsize+'px');
}

#parent{ height: 400px; width:100px;background:red;}
#child{padding-bottom:5px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="parent">
    <div id="child">
        <p class="child-text"> Once upon a time </p>
        <a class="child-link"> there lived a monkey</a>
        <p class="child-text"> who loved to eat oranges </p>
    </div>
</div>

当 #child 高度小于 #parent 时，它会添加 1px 直到不是。在css中，我给了#child一个5px的padding bottom，这样就不会溢出

JSFiddle