强制子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的底部，因此它不会溢出

JSFiddle

Answer 2

添加表的显示属性值 #parent和显示的元素表单元格的属性值要测量#parent的高度

 #parent, #child { width: 100%; height: 100%; position: relative; display: table; } .child-link, .child-text { /* ID/Class of whatever element you want to measure the #parent */ display: inline-block; height: 100%; width: 150px; vertical-align: top; background-color: green; bottom: 0; display: table-cell; border-left: solid 5px white; /* Just for Division sake */ } 

 <div id="parent"> <div id="child"><p class="child-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit. </p> <a class="child-link"> Lorem </a> <p class="child-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.</p> </div> </div> 

要使其取决于屏幕尺寸，请执行以下操作：

@media screen and (max-width: 768px) { /* Adjust as needed */
enter code here

}