calculer la largeur du texte avec jQuery

Question

J'essaie de calculer la largeur du texte à l'aide de jQuery. Je ne sais pas trop quoi, mais je fais certainement quelque chose de mal.

Donc, voici le code :

var c = $('.calltoaction');

var cTxt = c.text();

var cWidth =  cTxt.outerWidth();

c.css('width' , cWidth);

Merci d'avance pour votre aide !

Answer 1

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;
};

Answer 2

Voici une fonction qui est meilleure que d'autres affichées parce que

1. c'est plus court
2. cela fonctionne lorsque l'on passe 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émonstration : 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();
};

Answer 3

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;
};

En gros, une amélioration de celle de Rune, qui n'utilise pas de .html si légèrement

Answer 4

Les fonctions de largeur de jQuery peuvent être un peu douteuses lorsqu'il s'agit de déterminer la largeur du texte en raison de modèles de boîtes incohérents. Le moyen le plus sûr serait d'injecter div dans 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 :

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

Answer 5

J'ai trouvé cette solution qui fonctionne bien et qui hérite de la police d'origine avant de la dimensionner :

$.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;
}