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

我想显示足够的文本行以填充浏览器窗口的当前大小。另外，如果浏览器窗口更改大小，我想更新该值。 JavaScript是否等同于SIGWINCH？如何确定适合浏览器窗口的文本行数

感谢

2011-06-02 Joe McGuckin

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

来源

2011-06-02 01:58:54

一旦你计算出每一行的高度（取决于你的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(); 
});

来源

2011-06-02 02:14:00 ari

是的，我忘了，你需要检查线路高度，不是字体的高度。而且，由于这确实是通过CSS设置的一个值，所以不需要为测试文本而烦恼。 – 2011-06-02 02:31:30

需要考虑包装线以及包含块元素的填充，边框和边距。 – RobG 2011-06-02 03:00:21

@robg：true，但如果没有更多的信息，很难解释。 – ari 2011-06-02 04:56:01

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

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

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

来源

2011-06-02 02:49:11 ninjagecko

一种策略是不断添加文本（比如说单词，情节，段落），直到出现滚动条，然后返回到最后一个单词，句子，段落，无论如何。

一种轻型测试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; 
}

来源

2011-06-02 03:06:21 RobG

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

回答

相关问题