知道自動換行和其他應用程序在HTML中的文本行將有多寬

您知道一個很好的跨瀏覽器的方式來了解文本行的寬度，因此您可以準確地將其打破爲適合固定寬度嗎？知道自動換行和其他應用程序在HTML中的文本行將有多寬

假設你想打破一個長文本，所以它不會溢出一個固定寬度的容器，但是你希望該行打破最接近邊界的可能，所以猜測插入的位置 s不是一個乾淨的解。

我想調查，我想這可以做一個不可見的div，然後在裏面打印行，並檢查div的寬度，或類似的東西，用Javascript。

有沒有人做過這樣的事情？

*（焦點不自動換行，這只是現在我腦海中的應用，但我們知道，一個文本的寬度是我想要的）

來源

2009-08-01 Petruza

看看http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript – 2009-08-01 16:06:54

這是一個完整的「荒地魯賓遜」（這是否參考旅行得好嗎？）的方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <script type="text/javascript"> 
     function txtContent_onchange() 
     { 
      var span = document.getElementById("spanMeasure") 
      span.innerHTML = ""; 
      span.appendChild(document.createTextNode(this.value)); 
      document.getElementById("txtWidth").value = span.scrollWidth; 

     } 
    </script> 
    <style type="text/css"> 
     #spanMeasure 
     { 
      position:absolute; 
      top:0px; 
      left:0px; 
      visibility:hidden; 
      width:10px; 
      white-space:nowrap; 
      overflow:hidden 
     } 
    </style> 
</head> 
<body> 

    <input id="txtContent" onchange="txtContent_onchange.call(this)" /><br /> 
    <input id="txtWidth" /> 
    <span id="spanMeasure"><span> 

</body> 
</html>

這裏關鍵的是span元件的配置。這個元素不會影響頁面的外觀。它的scrollWidth屬性將返回它所包含文本的長度。當然，您需要設置任何字體樣式屬性才能獲得合理的值。

根據quirksmode網站Opera採用這種方法可能會有點片面，但我懷疑它最接近您將獲得一個完全跨瀏覽器的解決方案。

來源

2009-08-01 20:45:33 AnthonyWJones

知道自動換行和其他應用程序在HTML中的文本行將有多寬

回答

相關問題