javascript - 如何使文本流到下一行，并隐藏顶部？

Question

我正在研究计算器的显示部分。我有一个 div，里面有两个 div，每个都有文本。

<div>
<div>I'm text</div>
<div>I'm text</div>
</div>

用户可以使用按钮向 div 添加文本。我希望顶部 div 最多为两行并垂直对齐到底部。当超过这个长度时，应该溢出到顶部并隐藏起来。 IE。溢出应该显示多余文本的底部，并隐藏顶部。

我搜索了与隐藏图像或链接相关的类似问题并尝试了他们的解决方案。这些通常围绕使用以下属性:位置、宽度、高度、底部、溢出、垂直对齐、自动换行。我已经理解其中的大部分内容，但无法让它们发挥作用。我未能成功尝试的一种解决方案似乎是尝试将上述方法与额外的嵌套 div 结合使用。

至此，我已经控制了高度和宽度。顶部的 div 将只显示两行文本。我也有溢出工作。当它太长时，它会被隐藏。

问题是隐藏了底部，而不是顶部。

这就是它的样子。请注意，这两个数字是不可见的，它们是隐藏的:

这就是我想要的。注意两个是可见的:

这是相关的 HTML 和 CSS，如果您需要更多信息，下面是代码笔的链接:

HTML(麻烦的是#memory):

<div id=calculator>

            <div id=displaybox>
                  <div id=memory>
                  0
                  </div>
                  <div id=display>0</div>

            </div>
</div>

CSS:

#calculator {
      border-style: solid;
      height: 325px;
      width: 260px;
      margin:auto;
      margin-top:10px;
      border-radius:8px;
      background-color: #494949;
      font-family: 'Audiowide';
}

#displaybox {
      border-style:solid;
      border-width:3px;
      width:227.5px;
      margin-left:12px;
      margin-right:auto;
      border-radius: 8px;
      text-align:right;
      margin-top:20px;
      padding-right:12px;
      padding-left:3px;
      font-size:30px;
      background-color:#D4D7A1;
      height: 75px;
}

#memory {
      font-size:15px;
      padding-right:3px;
      line-height: 15px;
      margin-top:5px;
      padding-left:12px;
      color:#767676;
      margin-bottom:-7px;
      word-wrap: break-word;
      height:30px;
      width:207px;
      overflow:hidden;
      vertical-align: top !important;
}

代码笔:https://codepen.io/ethan-vernon/pen/WyQqzM "https://codepen.io/ethan-vernon/pen/WyQqzM

Answer 1

#memory block 的这个改变做到了:

添加了display: flex 和flex-flow: column-reverse

#memory{
     font-size: 15px;
     padding-right: 3px;
     line-height: 15px;
     margin-top: 5px;
     padding-left: 12px;
     color: #767676;
     margin-bottom: -7px;
     word-wrap: break-word;
     height: 30px;
     width: 207px;
     overflow: hidden;
     display: flex;
     flex-flow: column-reverse;
}