Calcolo della larghezza del testo

Sto cercando di calcolare la larghezza del testo usando jQuery. Non sono sicuro di cosa, ma sto decisamente facendo qualcosa di sbagliato.

Quindi, ecco il codice:

var c = $('.calltoaction');

var cTxt = c.text();

var cWidth =  cTxt.outerWidth();

c.css('width' , cWidth);

Questo ha funzionato meglio per me:

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

Ecco una funzione che è migliore di altre pubblicate perché

1. è più breve
2. funziona quando si passa una <input>, <span>o "string".
3. è più veloce per usi frequenti perché riutilizza un elemento DOM esistente.

Demo: 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();
};

La mia soluzione

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

Fondamentalmente un miglioramento rispetto a Rune, che non usa .htmlcosì alla leggera

Le textWidthfunzioni fornite nelle risposte e che accettano un stringcome argomento non tengono conto degli spazi bianchi iniziali e finali (quelli non vengono visualizzati nel contenitore fittizio). Inoltre, non funzioneranno se il testo contiene markup html (una sottostringa <br>non produrrà alcun output e  restituirà la lunghezza di uno spazio).

Questo è solo un problema per le textWidthfunzioni che accettano a string, perché se viene fornito un elemento DOM e .html()viene richiamato sull'elemento, probabilmente non è necessario risolverlo per questo caso d'uso.

Ma se, ad esempio, stai calcolando la larghezza del testo per modificare dinamicamente la larghezza di un inputelemento di testo mentre l'utente digita (il mio caso d'uso corrente), probabilmente vorrai sostituire gli spazi iniziali e finali con  e codificare la stringa in html.

Ho usato la soluzione di philfreo, quindi ecco una versione che risolve questo problema (con commenti sulle aggiunte):

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

Le funzioni di larghezza di jQuery possono essere un po 'ombreggiate quando si cerca di determinare la larghezza del testo a causa di modelli di box incoerenti. Il modo sicuro sarebbe iniettare div all'interno del tuo elemento per determinare la larghezza effettiva del testo:

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

Per utilizzare questo mini plugin, semplicemente:

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

Ho trovato che questa soluzione funziona bene ed eredita il carattere di origine prima del dimensionamento:

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

Né Rune né Brain funzionavano per me nel caso in cui l'elemento che conteneva il testo avesse una larghezza fissa. Ho fatto qualcosa di simile a Okamera. Utilizza meno selettori.

EDIT: Probabilmente non funzionerà per gli elementi che usano relativo font-size, poiché il codice seguente inserisce l' htmlCalcelemento in bodyquindi perde le informazioni sulla relazione dei genitori.

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

Se stai cercando di farlo con il testo in una casella di selezione o se quei due non funzionano, prova invece questo:

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

o

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

se vuoi prendere prima il testo

il fatto, stai sbagliando, che stai chiamando un metodo su cTxt, che è una semplice stringa e non un oggetto jQuery. cTxt è davvero il testo contenuto.

Leggera modifica a quella di Nico, poiché .children () restituirà un set vuoto se si fa riferimento a un elemento di testo come h1 o p . Quindi useremo .contents () invece, e useremo questo invece di $ (this) poiché stiamo creando un metodo su un oggetto 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;
    };

dopo aver inseguito un fantasma per due giorni, cercando di capire perché la larghezza di un testo non fosse corretta, mi sono reso conto che era a causa degli spazi bianchi nella stringa di testo che avrebbero interrotto il calcolo della larghezza.

quindi, un altro suggerimento è controllare se gli spazi bianchi stanno causando problemi. uso

 

spazio unificatore e vedere se questo lo risolve.

anche le altre funzioni suggerite dalle persone funzionano bene, ma sono gli spazi bianchi a causare problemi.

Se stai cercando di determinare la larghezza di un mix di nodi di testo ed elementi all'interno di un dato elemento, devi avvolgere tutti i contenuti con wrapInner () , calcolare la larghezza e quindi scartare il contenuto.

* Nota: sarà inoltre necessario estendere jQuery per aggiungere una funzione unfrapInner () poiché non è fornita di default.

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

Espandendo la risposta di @ philfreo:

Ho aggiunto la possibilità di controllare text-transform, poiché cose come di text-transform: uppercasesolito tendono a rendere il testo più ampio.

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

Chiama getColumnWidth () per ottenere il con del testo. Funziona perfettamente bene.

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

Nota: - Se vuoi .css inline passa i dettagli del carattere solo in stile.

Ho modificato il codice di Nico per adattarlo alle mie esigenze.

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

Sto usando .contents () poiché .children () non restituisce i nodi di testo di cui avevo bisogno. Ho anche scoperto che la larghezza restituita era influenzata dalla larghezza del viewport che causava il wrapping, quindi sto usando lo spazio bianco: nowrap; per ottenere la larghezza corretta indipendentemente dalla larghezza del viewport.

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

quasi una linea. Ti dà il con del primo carattere

Non sono riuscito a far funzionare al 100% nessuna delle soluzioni elencate, quindi ho ideato questo ibrido , basato sulle idee di @chmurson (che a sua volta era basato su @Okamera) e anche di @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);

Appunti:

• thisall'interno di un metodo di estensione jQuery c'è già un oggetto jQuery, quindi non c'è bisogno di tutti gli extra $(this)che hanno molti esempi.
• Aggiunge l'elemento fittizio al corpo una sola volta e lo riutilizza.
• Dovresti anche specificare white-space: nowrap, solo per assicurarti che lo misuri come una singola riga (e non a capo automatico basato su altri stili di pagina).
• Non sono riuscito a farlo funzionare da fontsolo e ho anche dovuto copiare esplicitamente font-size. Non sono ancora sicuro del perché (sto ancora indagando).
• Questo non supporta i campi di input in questo modo @philfreo.

A volte è necessario misurare anche l' altezza e non solo il testo , ma anche la larghezza dell'HTML . Ho preso la risposta di @philfreo e l'ho resa più flessibile e 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 larghezza del testo può essere diversa per i diversi genitori, ad esempio se aggiungi un testo nel tag h1 sarà più largo di div o label, quindi la mia soluzione come questa:

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

Ho avuto problemi con soluzioni come @ rune-kaagaard per grandi quantità di testo. Ho scoperto questo:

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

penso che dovresti usare $('.calltoaction').val;

inoltre, userei id (#) invece di una classe per questo .. se tu avessi più di una di queste classi, come lo gestiresti?