Question

我想显示足够的文本行来填充浏览器窗口的当前大小。此外，如果浏览器窗口更改大小，我想更新值。 javascript是否具有SIGWINCH的等价物？

由于

Answer 1

我不熟悉SIGWINCH，所以我不能说没有相应的东西。我所知道的是，你不能简单地让javascript返回页面上留下的文本行数。这只是因为每种字体都有（/可以有）不同的高度。你需要做的是1）获取用户的窗口高度，2）生成一个带有一段文本的span或div（如果你有足够的宽度，整个字符集将是最确定的），3）获取高度的div / span确定字体的高度4）删除样本span / div 5）将窗口高度除以字体高度。当用户更改窗口的尺寸时，再次执行整个过程（可以通过window.onresize甚至监听器注意窗口大小的变化）。当然，你可以通过在第一次确定之后存储字体高度来节省一些时间，尽管这取决于你编写函数的方式，但这并不重要。

Answer 2

一旦你弄清楚每一行的高度（取决于你的css）你可以做这样的事情（使用jquery）：

$(function() {
    $(window).resize(function() {
        var text = '',
            i = 0, 
            lineHeight = 12, // replace with correct value
            numLines = Math.floor($(this).height() / lineHeight);

        for(i; i < numLines; i++) {
            text += "text <br />";
        }

        $('body').html(text);
    });
    window.resize();
});

Answer 3

创建一个虚拟元素，以像素为单位测量其高度，然后销毁它。

您需要的行数为viewport height / height of line。

浏览器中SIGWINCH的等价物是resize事件;您可以将处理程序设置为window.onresize = function(event){...};（或使用jQuery设置'resize'事件处理程序。）

Answer 4

一种策略是继续添加文字（比如说文字，栏目，段落），直到滚动条出现，然后回到最后一个竞争单词，句子，段落，等等。

经过轻微测试的 hasScrollBars 功能是：

function hasScrollBars(el) {
  var s = el.style;
  var borderW = parseInt(s.borderLeftWidth,10) +
                parseInt(s.borderRightWidth,10);
  var borderH = parseInt(s.borderTopWidth,10) + 
                parseInt(s.borderBottomWidth,10);

  return el.offsetHeight > el.clientHeight + borderH || 
         el.offsetWidth > el.clientWidth + borderW;
}

如何确定适合浏览器窗口的文本行数

4 个答案: