Javascript 元素具有多行文本，如何将它们向上溢出？

所以基本上我有一个“log”元素来显示最近的消息。默认情况下，它是折叠的，只有1行高。你可以将鼠标悬停在它上面使它更高。关键是它被锚定在页面的底部。当我附加文本时，我希望看到它，而不是第一行

这就是它看起来的样子：

---------------
| first line  |  visible
---------------
| second line |  hidden
| third  line |  hidden

这就是我想要它的样子：

| first  line |  hidden
| second line |  hidden
---------------
| third line  |  visible
---------------

我尝试了“垂直对齐”的每一种变体，希望它能正确地定位文本。显然，我可以做prepend而不是append，它适用于折叠视图，但是当我展开日志窗口时，消息按相反的时间顺序排列。可以将其视为一个命令提示符，最新消息位于底部，顶部消息消失，但您可以向上滚动查看历史记录

功能日志（m）{
$（'#log'）。追加（''+m+''）
}
$（“#添加”）。在（'单击'，函数（）上{
日志（“添加了新条目…”）
})
$（'#log'）。悬停(
函数（）{
$（'#log'）。动画（{“高度”：“200px”}）
},
函数（）{
$（'#log'）。动画（{“高度”：“30px”}）
}
)
$（文档）.ready（函数（）{
日志（'文档准备就绪'）
})

#日志{
位置：绝对位置；
底部：100px；
左：5px；右：5px；
背景颜色：浅灰色；
高度：30px；
线高：30px；
字体大小：20px；
左侧填充：10px；
溢出：隐藏；
浮动：底部；
}

添加条目

以下是一种代码更改最少的简单方法

演示

HTML:

  <div id="log">
    <div class="wrapper">
    </div>
  </div>
  <button id="add">Add Entry</button>

JS:

功能日志（m）{
$（'#log.wrapper'）.append（'+m+''）；
}
$（“#添加”）。在（'单击'，函数（）上{
日志（“添加了新条目…”）
})
$（'#log'）。悬停(
函数（）{
$（'#log'）。动画（{“高度”：“200px”}）
},
函数（）{
$（'#log'）。动画（{“高度”：“30px”}）
}
)
$（文档）.ready（函数（）{
日志（'文档准备就绪'）
})

试试这个：

#日志{
位置：绝对位置；
底部：0；
}

功能日志（m）{
$（'#log'）。追加（''+m+''）
}
$（“#添加”）。在（'单击'，函数（）上{
日志（“添加了新条目…”）
})
$（“#日志包装器”）。悬停(
函数（）{
$（'#日志包装器'）。动画（{“高度”：“200px”}）
},
函数（）{
$（'#日志包装器'）。动画（{“高度”：“30px”}）
}
)
$（文档）.ready（函数（）{
日志（'文档准备就绪'）
})

#日志包装器{
位置：绝对位置；
底部：100px；
左：5px；右：5px；
背景颜色：浅灰色；
高度：30px；
线高：30px；
字体大小：20px；
左侧填充：10px；
溢出：隐藏；
浮动：底部；
}
#日志{
位置：绝对位置；
底部：0；
}

添加条目

.wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
}

#log {
  position: absolute;
  bottom: 100px;
  left: 5px; right: 5px;
  background-color: lightgray;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  padding-left: 10px;
  overflow: hidden;
  float: bottom;
}

function log(m) {
  $('#log .wrapper').append('<div>' + m + '</div>');
}

$("#add").on('click',function() {
  log("New Entry Added...")
})

$('#log').hover(
  function() {
    $('#log').animate({"height":"200px"})
  },
  function() {
    $('#log').animate({"height":"30px"})
  }
)

$(document).ready(function() {
  log('Document Ready.')

})