Calcular el ancho del texto

Estoy tratando de calcular el ancho del texto usando jQuery. No estoy seguro de qué, pero definitivamente estoy haciendo algo mal.

Entonces, aquí está el código:

var c = $('.calltoaction');

var cTxt = c.text();

var cWidth =  cTxt.outerWidth();

c.css('width' , cWidth);

Esto funcionó mejor para mí:

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

Aquí hay una función que es mejor que otras publicadas porque

1. es mas corto
2. funciona cuando se pasa una <input>, <span>o "string".
3. es más rápido para usos frecuentes porque reutiliza un elemento DOM existente.

Demostración: 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();
};

Mi solución

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

Básicamente una mejora con respecto a Rune, que no se usa .htmltan a la ligera

Las textWidthfunciones proporcionadas en las respuestas y que aceptan a stringcomo argumento no tendrán en cuenta los espacios en blanco iniciales y finales (no se representan en el contenedor ficticio). Además, no funcionarán si el texto contiene algún marcado html (una subcadena <br>no producirá ningún resultado y  devolverá la longitud de un espacio).

Esto es solo un problema para las textWidthfunciones que aceptan a string, porque si se proporciona un elemento DOM y .html()se invoca sobre el elemento, entonces probablemente no haya necesidad de arreglar esto para tal caso de uso.

Pero si, por ejemplo, está calculando el ancho del texto para modificar dinámicamente el ancho de un inputelemento de texto a medida que el usuario escribe (mi caso de uso actual), probablemente querrá reemplazar los espacios iniciales y finales con  y codificar la cadena a html.

Usé la solución de philfreo, así que aquí hay una versión que corrige esto (con comentarios sobre adiciones):

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

Las funciones de ancho de jQuery pueden ser un poco turbias al intentar determinar el ancho del texto debido a modelos de caja inconsistentes. La forma segura sería inyectar div dentro de su elemento para determinar el ancho real del texto:

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

Para usar este mini complemento, simplemente:

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

Encontré que esta solución funciona bien y hereda la fuente de origen antes de dimensionar:

$.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 funcionaban para mí en caso de que el elemento que sostenía el texto tuviera un ancho fijo. Hice algo similar a Okamera. Utiliza menos selectores.

EDITAR: Probablemente no funcione para elementos que usan relativo font-size, ya que el siguiente código inserta el htmlCalcelemento en, por lo bodytanto, pierde la información sobre la relación de los padres.

$.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 intentas hacer esto con texto en un cuadro de selección o si esos dos no funcionan, prueba este en su lugar:

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

si quieres tomar el texto primero

Lo que está haciendo mal es que está llamando a un método en cTxt, que es una cadena simple y no un objeto jQuery. cTxt es realmente el texto contenido.

Ligero cambio a Nico, ya que .children () devolverá un conjunto vacío si hacemos referencia a un elemento de texto como h1 o p . Entonces usaremos .contents () en su lugar, y usaremos esto en lugar de $ (this) ya que estamos creando un método en un objeto 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;
    };

Después de perseguir a un fantasma durante dos días, tratando de averiguar por qué el ancho de un texto era incorrecto, me di cuenta de que se debía a los espacios en blanco en la cadena de texto que detenían el cálculo del ancho.

por tanto, otro consejo es comprobar si los espacios en blanco están causando problemas. utilizar

 

espacio sin rupturas y ver si eso lo arregla.

las otras funciones sugeridas por la gente también funcionan bien, pero son los espacios en blanco los que causan problemas.

Si está tratando de determinar el ancho de una combinación de nodos de texto y elementos dentro de un elemento dado, necesita envolver todo el contenido con wrapInner () , calcular el ancho y luego desenvolver el contenido.

* Nota: También necesitará extender jQuery para agregar una función unsrapInner () ya que no se proporciona por defecto.

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

Ampliando la respuesta de @ philfreo:

Agregué la capacidad de verificar text-transform, ya que cosas como text-transform: uppercasegeneralmente tienden a ensanchar el texto.

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

Llame a getColumnWidth () para obtener el texto. Esto funciona perfectamente 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;
}

Nota: - Si desea .css en línea, pase los detalles de la fuente solo en estilo.

Modifiqué el código de Nico para que funcionara según mis necesidades.

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

Estoy usando .contents () ya que .children () no devuelve los nodos de texto que necesitaba. También descubrí que el ancho devuelto se vio afectado por el ancho de la ventana gráfica que estaba causando el ajuste, así que estoy usando espacio en blanco: nowrap; para obtener el ancho correcto independientemente del ancho de la ventana gráfica.

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

casi una línea. Te da el con del primer personaje

No pude hacer que ninguna de las soluciones enumeradas funcionara al 100%, así que se me ocurrió este híbrido , basado en ideas de @chmurson (que a su vez se basó en @Okamera) y también 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);

Notas:

• thisdentro de un método de extensión jQuery ya es un objeto jQuery, por lo que no es necesario todo lo extra $(this)que tienen muchos ejemplos.
• Solo agrega el elemento ficticio al cuerpo una vez y lo reutiliza.
• También debe especificar white-space: nowrap, solo para asegurarse de que lo mida como una sola línea (y no un ajuste de línea basado en otro estilo de página).
• No pude hacer que esto funcionara fontsolo y tuve que copiar explícitamente font-sizetambién. No estoy seguro de por qué todavía (todavía estoy investigando).
• Esto no admite campos de entrada de esa manera @philfreo.

A veces también necesita medir adicionalmente la altura y no solo el texto , sino también el ancho de HTML . Tomé la respuesta de @philfreo y la hice más flexible y útil:

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

el ancho del texto puede ser diferente para diferentes padres, por ejemplo, si agrega un texto en la etiqueta h1, será más ancho que div o etiqueta, por lo que mi solución es la siguiente:

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

Tuve problemas con soluciones como las de @ rune-kaagaard para grandes cantidades de texto. Descubrí esto:

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

creo que deberías usar $('.calltoaction').val;

Además, estaría usando id (#) en lugar de una clase para eso ... si tienes más de una de esas clases, ¿cómo lo manejaría?