强制子 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 vertically 的内容适合父 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

Answer 2

将table的显示property value添加到#parent和table的display property value -cell 到要测量高度的元素#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

}