Question

我在计算器的显示部分工作。我有一个div，里面有两个div，每个div都带有文本。

<div id=calculator>

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

            </div>
</div>

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

我搜索过与隐藏图片或链接有关的类似问题并尝试了他们的解决方案。这些通常围绕使用以下属性：位置，宽度，高度，底部，溢出，垂直对齐，自动换行。我已经理解了其中的大部分内容，但是还没有能够让他们去工作。我无法成功尝试的一个解决方案似乎尝试使用上面的一些组合和一个额外的嵌套div。

此时，我已经达到了身高和高度。宽度控制。顶部div只显示两行文字。我也有溢出工作。如果时间太长，则会被隐藏。

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

这就是它的样子。注意这两个人不可见，他们被隐藏了：

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

以下相关的HTML＆amp; CSS，如果您需要更多信息，那么下面是指向codepen的链接：

HTML（麻烦div是#memory）：

#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;
}

CSS：

{{1}}

Codepen：https://codepen.io/ethan-vernon/pen/WyQqzM＆＃34; https://codepen.io/ethan-vernon/pen/WyQqzM

Answer 1

对#memory块的这一改动做到了：

添加 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;
}

Answer 2

我还没有找到CSS / HTML解决方案的答案。但是，我转向jQuery / JavaScript并通过在每次更新#memory div后调用以下函数解决了我的问题。

function heightCheck(str) {

      console.log(str.substr(1));
      console.log('memory: ' + $("#memory").height());
      while ($("#memory").height()>30) {
            str=str.substr(1);
            $("#memory").text(str);
            console.log(str);
            console.log($("#memory").height());
      }

}

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

2 个答案: