如何確定適合瀏覽器窗口的文本行數

我想顯示足夠的文本行以填充瀏覽器窗口的當前大小。另外，如果瀏覽器窗口更改大小，我想更新該值。 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

如何確定適合瀏覽器窗口的文本行數

回答

相關問題