Connaître la largeur d'une ligne de texte en HTML pour le remplissage de texte et d'autres applications

Connaissez-vous une bonne façon de connaître la largeur d'une ligne de texte pour pouvoir la découper exactement pour une largeur fixe? Supposons que vous souhaitiez découper un long texte comme s'il ne débordait pas un conteneur de largeur fixe, mais que vous vouliez que la ligne se brise le plus près possible de la bordure, donc deviner où insérer s n'est pas propre Solution. Je veux étudier, j'imagine que cela pourrait être fait en ayant un div invisible puis en imprimant la ligne à l'intérieur et en vérifiant la largeur de div, ou quelque chose comme ça, avec Javascript.Connaître la largeur d'une ligne de texte en HTML pour le remplissage de texte et d'autres applications

Est-ce que quelqu'un a fait quelque chose comme ça?

* (l'accent est pas emballage de mot, qui est juste l'application qui vient à l'esprit maintenant, mais connaissant la largeur d'un texte est ce que je veux)

Source

2009-08-01 Petruza

Jetez un oeil à http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript –

@Josef: La réponse à cette question peut avoir un impact sur l'aspect visuel de la page. Spécifiquement dans IE, une barre de défilement horizontale peut apparaître sans raison apparente pour l'utilisateur. – AnthonyWJones

@AnthonyWJones: Je vois, vous pourriez envisager d'ajouter votre réponse là aussi? –

Voici une complète « Heath Robinson » (fait cette référence bien voyager?) approche.

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

La chose essentielle ici est la configuration de l'élément span. Cet élément n'affectera pas l'apparence visuelle de la page. Sa propriété scrollWidth renvoie la longueur du texte qu'il contient. Bien sûr, vous devrez définir tous les attributs de style de police pour obtenir une valeur raisonnable.

Selon le site Opera quirksmode peut être un peu floconneux avec cette approche, mais je soupçonne que le plus proche, vous obtiendrez à une solution de navigateur complet.

Source

2009-08-01 20:45:33 AnthonyWJones

Connaître la largeur d'une ligne de texte en HTML pour le remplissage de texte et d'autres applications

Répondre

Questions connexes