web-dev-qa-db-fra.com

Mesurer la largeur / hauteur du texte sans rendu

Existe-t-il un moyen d'obtenir une estimation de la largeur du texte sans rendre les éléments réels? Quelque chose comme TextMetrics sur toile?

Cas: J'ai besoin d'estimer la hauteur des éléments pour ReactList. Pour ce faire, je devrais savoir à peu près combien d'espace les éléments de texte auront besoin (ou combien de lignes couvriront-ils).

par exemple.

render(){
    return <div><SomeComponentWithKnownDims/><p>{this.props.someText}</p></div>;
}

Si je savais quelle largeur someText serait rendue sur une seule ligne et combien de temps la ligne serait, je pourrais facilement trouver une estimation décente pour la hauteur des composants.

EDIT: Notez que cela est assez critique pour les performances et DOM ne doit pas être touché

javascripthtmltextreactjsdimension
21
Seppo420

S'il te plaît, vérifie cela. est une solution utilisant canvas

function get_tex_width(txt, font) {
        this.element = document.createElement('canvas');
        this.context = this.element.getContext("2d");
        this.context.font = font;
        return this.context.measureText(txt).width;
    }
    alert('Calculated width ' + get_tex_width("Hello World", "30px Arial"));
    alert("Span text width "+$("span").width());

Démo utilisant

[~ # ~] modifier [~ # ~]

La solution utilisant le canevas n'est pas la meilleure, chaque navigateur traite des tailles de canevas différentes.

Ici est une bonne solution pour obtenir la taille du texte en utilisant un élément temporaire. Démo

[~ # ~] modifier [~ # ~]

La spécification canvas ne nous donne pas de méthode pour mesurer la hauteur d'une chaîne, donc pour cela nous pouvons utiliser parseInt(context.font). POUR obtenir largeur et hauteur. Cette astuce ne fonctionne qu'avec la taille px.

function get_tex_size(txt, font) {
    this.element = document.createElement('canvas');
    this.context = this.element.getContext("2d");
    this.context.font = font;
    var tsize = {'width':this.context.measureText(txt).width, 'height':parseInt(this.context.font)};
    return tsize;
}
var tsize = get_tex_size("Hello World", "30px Arial");

alert('Calculated width ' + tsize['width'] + '; Calculated height ' + tsize['height']);
21
vasilenicusor