Wissen, wie breit eine Textzeile in HTML für Wortumbruch und andere Anwendungen sein wird

Kennen Sie eine gute Cross-Browser-Art zu wissen, wie breit eine Textzeile ist, so dass Sie es genau auf eine feste Breite brechen können?Wissen, wie breit eine Textzeile in HTML für Wortumbruch und andere Anwendungen sein wird

Angenommen, Sie möchten einen langen Text so brechen, dass er einen Container mit fester Breite nicht überläuft, aber Sie möchten, dass die Zeile am nächsten zum Rahmen bricht, also raten, wo s eingefügt wird, ist nicht sauber Lösung.

Ich möchte untersuchen, ich stelle mir vor, dies könnte getan werden mit einem unsichtbaren div dann Drucken der Zeile darin und Überprüfen der div's Breite, oder so etwas, mit Javascript.

Hat jemand so etwas getan?

* (der Fokus nicht Zeilenumbruch wird, das ist nur die Anwendung, die jetzt mir in den Sinn kommt, sondern eine Textbreite zu wissen, ist, was ich will)

Quelle

2009-08-01 Petruza

Werfen Sie einen Blick auf http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript –

@Josef: Die Antwort in dieser Frage kann das visuelle Erscheinungsbild der Seite beeinflussen. Speziell im Internet Explorer kann dies dazu führen, dass dem Benutzer eine horizontale Bildlaufleiste ohne ersichtlichen Grund angezeigt wird. – AnthonyWJones

@AnthonyWJones: Ich sehe, Sie könnten darüber nachdenken, Ihre Antwort auch dort hinzuzufügen? –

die komplette „Heath Robinson“ ist (tut das Referenz Reisen gut?) Ansatz.

<!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>

Das Entscheidende hier ist die Konfiguration des Span-Elements. Dieses Element hat keinen Einfluss auf die visuelle Darstellung der Seite. Seine Eigenschaft scrollWidth gibt die Länge des darin enthaltenen Texts zurück. Natürlich müssten Sie alle Schriftstilattribute festlegen, um einen vernünftigen Wert zu erhalten.

Nach quirksmode Website Opera kann ein wenig flockig mit diesem Ansatz sein, aber ich vermute, es ist am nächsten, die Sie zu einem vollständig Cross-Browser-Lösung erhalten.

Quelle

2009-08-01 20:45:33 AnthonyWJones

Wissen, wie breit eine Textzeile in HTML für Wortumbruch und andere Anwendungen sein wird

Antwort

Verwandte Themen