Question

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

Answer 1

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

生活演示：http://jsfiddle.net/s4FyM/1/

需要jquery来滚动div：

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

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

1 个答案: