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

counting max number of lines for pre element in html

本文关键字：元素 HTML pre 计算      更新时间：2023-09-26

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

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

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

需要 jquery 来滚动div：

$('.box').scrollTop($('.box')[0].scrollHeight);
相关文章：