javascript - 计算html中pre元素的最大行数

Question

我有一个 <pre> html 元素和一个文本框附加到它。当我在文本框中写入时，文本出现在前置元素上(如终端窗口)，但我的问题是，当我输入的文本到达前置元素高度的末尾时，新出现的文本从底部消失。你可以把它想象成一个没有导航的消息框，所以即将到来的新行不在场景中，我们只能看到旧的。我想知道如何计算每页的最大行数并从顶部删除第一个添加的行？你知道任何工作的例子吗？那就是 jsfiddle:http://jsfiddle.net/LQg7W/2133/但是我们输入的内容并没有出现在 pre 元素中，因为我写了一些我无法在 jsfiddle 中编写的 ajax post 服务器端

<div class="row">
  <div class="large-12 columns" style="background: #222; height: 70vh;">
  <pre id="terminalPre" width="2">
    <code id="terminal" style="color: #fff; padding: 1em;" ></code>
  </pre>
  <input type="text" id="textInput" name="" style="background: #222; position: absolute; bottom: 0; color: #fff;">
  </div>
</div>

Answer 1

我建议您使用 CSS 解决它。您可以添加样式为 overflow:hidden 的 div，然后使用 jQuery 将其滚动到底部。

现场演示:http://jsfiddle.net/s4FyM/1/

需要 jquery 来滚动 div:

$('.box').scrollTop($('.box')[0].scrollHeight);