html - 如何将 div 扩展到某个高度，并且仅在该滚动之后？

Question

我有一个最初是一定大小的 div，比如 100px。我希望它能够扩展以适应内容，比如直到 250 像素，然后滚动。我试过使用

  text-overflow: ellipsis; max-height: 250px; overflow-y: scroll;

但它不起作用，一旦文本溢出 100 像素，它就会滚动。

我怎样才能只使用 css 来做到这一点？

标签： htmlcssscroll

Answer 1

根据 Ajeet Eppakayala 的评论，这似乎可行，将 div 扩展到 250px 高度，然后显示滚动条：

<style>
div {
  text-overflow: ellipsis;
  font-size:20px;
  min-height: 100px;
  max-height: 250px;
  height:auto;
  overflow-y:auto;
  background-color:cyan;
  margin-top:20px;
}
</style>
<p>height:100px;</p>
<div>
  1<br>2<br>3<br>
</div>
<p>height: whatever is required for the text</p>
<div>
  1<br>2<br>3<br>1<br>2<br>3<br>4<br>5
</div>
<p>height:250px and scrolling</p>
<div>
  1<br>2<br>3<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>12<br>14<br>15<br>16<br>
</div>