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

我有一个

html元素和一个文本框附加到它。当我在文本框中写入文本时，文本会出现在前置元素上（就像一个终端窗口），但我的问题是，当我输入的文本达到前置元素高度的末尾时，新出现的文本会从底部消失。你可以把它想象成一个没有导航的消息框，这样接下来的新行就离开了场景，我们只能看到旧行。我想知道如何计算每页的最大行数，并从顶部删除第一个添加的行？你知道任何工作的例子吗？这就是jsfiddle：但是我们输入的内容并没有出现在pre元素中，因为我编写了一些ajax后服务器端，我无法在jsfiddle中编写它们

<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>

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

---

我建议您使用CSS解决此问题。 您可以使用样式

overflow:hidden

添加

div

，然后使用jQuery将其滚动到底部

现场演示：

需要jquery来滚动div：

---

你能为这个做一把小提琴吗？请做一把小提琴？在ur JSFidle链接中，没有JQuery可以显示它。请用代码更新链接