Calcul de la largeur du texte

J'essaye de calculer la largeur du texte en utilisant jQuery. Je ne sais pas quoi, mais je fais définitivement quelque chose de mal.

Alors, voici le code:

var c = $('.calltoaction');

var cTxt = c.text();

var cWidth =  cTxt.outerWidth();

c.css('width' , cWidth);

Cela a mieux fonctionné pour moi:

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

Voici une fonction qui est meilleure que d'autres publiées car

1. c'est plus court
2. cela fonctionne lors du passage d' un <input>, <span>ou "string".
3. il est plus rapide pour les utilisations fréquentes car il réutilise un élément DOM existant.

Démo: http://jsfiddle.net/philfreo/MqM76/

// Calculate width of text from DOM element or string. By Phil Freo <http://philfreo.com>
$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

Ma solution

$.fn.textWidth = function(){
    var self = $(this),
        children = self.children(),
        calculator = $('<span style="display: inline-block;" />'),
        width;

    children.wrap(calculator);
    width = children.parent().width(); // parent = the calculator wrapper
    children.unwrap();
    return width;
};

Fondamentalement, une amélioration par rapport à Rune, qui n'utilise pas .htmlsi légèrement

Les textWidthfonctions fournies dans les réponses et qui acceptent un stringcomme argument ne prendront pas en compte les espaces blancs de début et de fin (ceux-ci ne sont pas rendus dans le conteneur factice). En outre, ils ne fonctionneront pas si le texte contient un balisage html (une sous-chaîne <br>ne produira aucune sortie et  renverra la longueur d'un espace).

Ceci n'est un problème que pour les textWidthfonctions qui acceptent a string, car si un élément DOM est donné et .html()est appelé sur l'élément, alors il n'est probablement pas nécessaire de résoudre ce problème pour un tel cas d'utilisation.

Mais si, par exemple, vous calculez la largeur du texte pour modifier dynamiquement la largeur d'un inputélément de texte au fur et à mesure que l'utilisateur tape (mon cas d'utilisation actuel), vous voudrez probablement remplacer les espaces de début et de fin par  et encoder la chaîne en html.

J'ai utilisé la solution de philfreo donc en voici une version qui corrige ce problème (avec des commentaires sur les ajouts):

$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').appendTo(document.body);
    var htmlText = text || this.val() || this.text();
    htmlText = $.fn.textWidth.fakeEl.text(htmlText).html(); //encode to Html
    htmlText = htmlText.replace(/\s/g, "&nbsp;"); //replace trailing and leading spaces
    $.fn.textWidth.fakeEl.html(htmlText).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

Les fonctions de largeur de jQuery peuvent être un peu floues lorsque vous essayez de déterminer la largeur du texte en raison de modèles de boîte incohérents. Le moyen le plus sûr serait d'injecter div à l'intérieur de votre élément pour déterminer la largeur réelle du texte:

$.fn.textWidth = function(){
  var sensor = $('<div />').css({margin: 0, padding: 0});
  $(this).append(sensor);
  var width = sensor.width();
  sensor.remove();
  return width;
};

Pour utiliser ce mini plugin, il suffit de:

$('.calltoaction').textWidth();

J'ai trouvé que cette solution fonctionne bien et qu'elle hérite de la police d'origine avant le dimensionnement:

$.fn.textWidth = function(text){
  var org = $(this)
  var html = $('<span style="postion:absolute;width:auto;left:-9999px">' + (text || org.html()) + '</span>');
  if (!text) {
    html.css("font-family", org.css("font-family"));
    html.css("font-size", org.css("font-size"));
  }
  $('body').append(html);
  var width = html.width();
  html.remove();
  return width;
}

Ni Rune ni Brain ne fonctionnaient pour moi au cas où l'élément qui contenait le texte avait une largeur fixe. J'ai fait quelque chose de similaire à Okamera. Il utilise moins de sélecteurs.

EDIT: Cela ne fonctionnera probablement pas pour les éléments qui utilisent relative font-size, car le code suivant insère l' htmlCalcélément dans bodyainsi perd les informations sur la relation des parents.

$.fn.textWidth = function() {
    var htmlCalc = $('<span>' + this.html() + '</span>');
    htmlCalc.css('font-size', this.css('font-size'))
            .hide()
            .prependTo('body');
    var width = htmlCalc.width();
    htmlCalc.remove();
    return width;
};

Si vous essayez de faire cela avec du texte dans une boîte de sélection ou si ces deux ne fonctionnent pas, essayez celle-ci à la place:

$.fn.textWidth = function(){
 var calc = '<span style="display:none">' + $(this).text() + '</span>';
 $('body').append(calc);
 var width = $('body').find('span:last').width();
 $('body').find('span:last').remove();
 return width;
};

ou

function textWidth(text){
 var calc = '<span style="display:none">' + text + '</span>';
 $('body').append(calc);
 var width = $('body').find('span:last').width();
 $('body').find('span:last').remove();
 return width;
};

si vous voulez d'abord saisir le texte

la chose que vous faites mal, c'est que vous appelez une méthode sur cTxt, qui est une simple chaîne et non un objet jQuery. cTxt est vraiment le texte contenu.

Légère modification de celle de Nico, car .children () renverra un ensemble vide si nous référençons un élément de texte comme h1 ou p . Nous allons donc utiliser .contents () à la place, et utiliser this au lieu de $ (this) puisque nous créons une méthode sur un objet jQuery.

$.fn.textWidth = function(){
    var contents = this.contents(),
        wrapper  = '<span style="display: inline-block;" />',
        width    = '';

    contents.wrapAll(wrapper);
    width = contents.parent().width(); // parent is now the wrapper
    contents.unwrap();
    return width;
    };

après avoir chassé un fantôme pendant deux jours, en essayant de comprendre pourquoi la largeur d'un texte était incorrecte, j'ai réalisé que c'était à cause des espaces blancs dans la chaîne de texte qui arrêteraient le calcul de la largeur.

donc, une autre astuce est de vérifier si les espaces sont à l'origine de problèmes. utilisation

 

espace insécable et voyez si cela résout le problème.

les autres fonctions suggérées fonctionnent bien aussi, mais ce sont les espaces blancs qui causent des problèmes.

Si vous essayez de déterminer la largeur d'un mélange de nœuds de texte et d'éléments à l'intérieur d'un élément donné, vous devez envelopper tout le contenu avec wrapInner () , calculer la largeur, puis dérouler le contenu.

* Remarque: Vous devrez également étendre jQuery pour ajouter une fonction unwrapInner () car elle n'est pas fournie par défaut.

$.fn.extend({
  unwrapInner: function(selector) {
      return this.each(function() {
          var t = this,
              c = $(t).children(selector);
          if (c.length === 1) {
              c.contents().appendTo(t);
              c.remove();
          }
      });
  },
  textWidth: function() {
    var self = $(this);
    $(this).wrapInner('<span id="text-width-calc"></span>');
    var width = $(this).find('#text-width-calc').width();
    $(this).unwrapInner();
    return width;
  }
});

Développement de la réponse de @ philfreo:

J'ai ajouté la possibilité de vérifier text-transform, car des choses comme text-transform: uppercaseont généralement tendance à élargir le texte.

$.fn.textWidth = function (text, font, transform) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text())
        .css('font', font || this.css('font'))
        .css('text-transform', transform || this.css('text-transform'));
    return $.fn.textWidth.fakeEl.width();
};

var calc = '<span style="display:none; margin:0 0 0 -999px">' + $('.move').text() + '</span>';

Appelez getColumnWidth () pour obtenir le avec du texte. Cela fonctionne parfaitement bien.

someFile.css
.columnClass { 
    font-family: Verdana;
    font-size: 11px;
    font-weight: normal;
}


function getColumnWidth(columnClass,text) { 
    tempSpan = $('<span id="tempColumnWidth" class="'+columnClass+'" style="display:none">' + text + '</span>')
          .appendTo($('body'));
    columnWidth = tempSpan.width();
    tempSpan.remove();
return columnWidth;
}

Remarque: - Si vous voulez .css en ligne, transmettez les détails de la police uniquement avec style.

J'ai modifié le code de Nico pour qu'il réponde à mes besoins.

$.fn.textWidth = function(){
    var self = $(this),
        children = self.contents(),
        calculator = $('<span style="white-space:nowrap;" />'),
        width;

    children.wrap(calculator);
    width = children.parent().width(); // parent = the calculator wrapper
    children.unwrap();
    return width;
};

J'utilise .contents () car .children () ne renvoie pas les nœuds de texte dont j'avais besoin. J'ai également constaté que la largeur renvoyée était affectée par la largeur de la fenêtre qui provoquait un wrapping, donc j'utilise un espace blanc: nowrap; pour obtenir la largeur correcte quelle que soit la largeur de la fenêtre.

$.fn.textWidth = function(){
        var w = $('body').append($('<span stlye="display:none;" id="textWidth"/>')).find('#textWidth').html($(this).html()[0]).width();
        $('#textWidth').remove();
        console.log(w);
        return w;
    };

presque une seule doublure. Vous donne le avec du premier personnage

Je ne pouvais faire fonctionner aucune des solutions répertoriées à 100%, j'ai donc proposé cet hybride , basé sur des idées de @chmurson (qui était à son tour basée sur @Okamera) et également de @philfreo:

(function ($)
{
    var calc;
    $.fn.textWidth = function ()
    {
        // Only create the dummy element once
        calc = calc || $('<span>').css('font', this.css('font')).css({'font-size': this.css('font-size'), display: 'none', 'white-space': 'nowrap' }).appendTo('body');
        var width = calc.html(this.html()).width();
        // Empty out the content until next time - not needed, but cleaner
        calc.empty();
        return width;
    };
})(jQuery);

Remarques:

• thisà l'intérieur d'une méthode d'extension jQuery se trouve déjà un objet jQuery, donc pas besoin de tout le supplément $(this)que de nombreux exemples ont.
• Il n'ajoute l'élément factice au corps qu'une seule fois et le réutilise.
• Vous devez également préciser white-space: nowrap, juste pour vous assurer qu'il le mesure comme une seule ligne (et non un retour à la ligne basé sur un autre style de page).
• Je n'ai pas pu faire fonctionner cela en utilisant font seul et devais également copier explicitement font-size. Je ne sais pas encore pourquoi (enquête toujours).
• Cela ne prend pas en charge les champs de saisie de cette façon @philfreo.

Parfois, vous devez également mesurer la hauteur et non seulement le texte , mais également la largeur HTML . J'ai pris la réponse @philfreo et je l'ai rendue plus flexible et utile:

function htmlDimensions(html, font) {
  if (!htmlDimensions.dummyEl) {
    htmlDimensions.dummyEl = $('<div>').hide().appendTo(document.body);
  }
  htmlDimensions.dummyEl.html(html).css('font', font);
  return {
    height: htmlDimensions.dummyEl.height(),
    width: htmlDimensions.dummyEl.width()
  };
}

la largeur du texte peut être différente pour différents parents, par exemple si vous ajoutez un texte dans la balise h1, il sera plus large que div ou étiquette, donc ma solution comme celle-ci:

<h1 id="header1">

</h1>

alert(calcTextWidth("bir iki", $("#header1")));

function calcTextWidth(text, parentElem){
    var Elem = $("<label></label>").css("display", "none").text(text);
    parentElem.append(Elem);
  var width = Elem.width();
  Elem.remove();
    return width;
}

J'ai eu des problèmes avec des solutions comme @ rune-kaagaard pour de grandes quantités de texte. J'ai découvert ceci:

$.fn.textWidth = function() {
	var width = 0;
	var calc = '<span style="display: block; width: 100%; overflow-y: scroll; white-space: nowrap;" class="textwidth"><span>' + $(this).html() + '</span></span>';
	$('body').append(calc);
	var last = $('body').find('span.textwidth:last');
	if (last) {
			var lastcontent = last.find('span');
			width = lastcontent.width();
			last.remove();
	}
	return width;
};

JSFiddle GitHub

je pense que tu devrais utiliser $('.calltoaction').val;

aussi, j'utiliserais id (#) au lieu d'une classe pour cela .. si vous avez plus d'une de ces classes, comment le gérerait-il?