Calculer la largeur du texte avec Javascript

Question

Je voudrais utiliser Javascript pour calculer la largeur d’une chaîne, est-ce possible sans avoir à utiliser une police à espacement fixe ? Si ce n’est pas intégré, ma seule idée est de créer un tableau de largeurs pour chaque personnage, mais c’est assez déraisonnable surtout supportant unicode et type différente tailles (et tous les navigateurs d’ailleurs).

Answer 1

Le moins hacky HTML 5 de calculer la largeur du texte est la Toile.savoir measuretext méthode (plus d'explications ici).

JSFiddle ici:

/**
 * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
 * 
 * @param {String} text The text to be rendered.
 * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
 * 
 * @see http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
 */
getTextWidth = function(text, font) {
    // re-use canvas object for better performance
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
};

console.log(getTextWidth("hello there!", "bold 12pt arial"));  // reports 84

Il y a plusieurs avantages à cette approche, y compris:

• Vous n'avez pas à changer votre DOM, donc sa plus simple et vous n'avez pas de soins sur la visibilité des aspects.
• Une personnalisation est possible en modifiant plus toile propriétés de texte, telles que l' textAlign et textBaseline.

Selon ce test (pas le mien), la Toile méthode est aussi de manière plus rapide que la méthode DOM fournis par d'autres ici. Bien sûr, ce n'est pas une comparaison équitable parce que l'élément DOM, contrairement à la toile n'est pas mis en cache.

REMARQUE: Lorsque vous ajoutez du texte à votre DOM, n'oubliez pas de prendre également en compte le rembourrage, la marge et de la frontière.

NOTE 2: Cet extrait vous obtient le texte de la largeur (en pixels). Comme expliqué ici, la taille de la police est en fait égale à la hauteur de la police, donc, c'est comment vous pouvez obtenir.

Answer 2

Créer une DIV de style avec les styles suivants. Dans votre JavaScript, définir la taille de police et les attributs que vous essayez de mesurer, mettre votre chaîne dans la balise DIV, puis lire la largeur actuelle et la hauteur de la DIV. Elle s’étirera pour adapter le contenu et la taille sera au sein de quelques pixels de la chaîne rendue taille.

HTML :

CSS :

JavaScript (fragment) :

Answer 3

Une Voici que j’ai fouetté ensemble sans exemple. On dirait que nous sommes tous sur la même page.

Utilisation est simple :``

** Ajouter `` pour cordes avec une largeur plus grande que la largeur de la fenêtre peuvent être calculées.

Answer 4

Cela fonctionne pour moi...

Answer 5

jQuery :