examples - jquery pdf

Calculando el ancho del texto

Question

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

Answer 1

A veces también es necesario medir la altura y no solo el texto , sino también el ancho HTML . Respondí @philfreo y lo 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()
  };
}

Answer 2

Ampliando la respuesta de @ philfreo:

He añadido la posibilidad de verificar text-transform de text-transform , ya que cosas como text-transform: uppercase general 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();
};

Answer 3

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

1. es mas corto
2. funciona al pasar 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();
};

Answer 4

Encontré que esta solución funciona bien y hereda la fuente de origen antes del tamaño:

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

Answer 5

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

Answer 6

Las funciones textWidth proporcionadas en las respuestas y que aceptan una string como argumento no tendrán en cuenta los espacios en blanco iniciales y finales (los que no se representan en el contenedor ficticio). Además, no funcionarán si el texto contiene alguna marca HTML (una cadena secundaria <br> no producirá ningún resultado y   devolverá la longitud de un espacio).

Esto es solo un problema para las funciones textWidth que aceptan una string , porque si se da un elemento DOM, y se .html() sobre el elemento, entonces probablemente no sea necesario arreglar esto para dicho caso de uso.

Pero si, por ejemplo, está calculando el ancho del texto para modificar dinámicamente el ancho de un elemento de input texto a medida que el usuario escribe (mi caso de uso actual), probablemente quiera reemplazar espacios iniciales y finales con   y codifica 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();
};

Answer 7

Las funciones de ancho de jQuery pueden ser un poco confusas cuando se trata de determinar el ancho del texto debido a modelos de cajas inconsistentes. La forma segura sería inyectar div dentro de tu 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();

Answer 8

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

Answer 9

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 que .css en línea pase los detalles de la fuente solo con estilo.

Answer 10

Modifiqué el código de Nico para que funcione para 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 encontré que el ancho devuelto se vio afectado por el ancho de la ventana gráfica que estaba causando el ajuste, así que estoy usando el espacio en blanco: nowrap; para obtener el ancho correcto independientemente del ancho de la ventana gráfica.

Answer 11

Ni Rune ni Brain funcionaban para mí en caso de que el elemento que contenía el texto tuviera un ancho fijo. Hice algo similar a Okamera. Utiliza menos selectores

EDITAR: Probablemente no funcione para elementos que htmlCalc font-size relativo, ya que el siguiente código inserta el elemento htmlCalc en el body lo que 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;
};

Answer 12

No pude conseguir 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 estaba basado 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:

• this dentro de un método de extensión jQuery ya es un objeto jQuery, por lo que no es necesario tener todos los $(this) adicionales $(this) que tienen muchos ejemplos.
• Solo agrega el elemento ficticio al cuerpo una vez y lo vuelve a usar.
• También debe especificar white-space: nowrap , solo para asegurarse de que lo mida como una sola línea (y no como un salto de línea basado en el estilo de otra página).
• No pude hacer que funcionara solo con la font y también tuve que copiar explícitamente font-size . Aún no estoy seguro de por qué (aún estoy investigando).
• Esto no admite campos de entrada de la misma manera que @philfreo .

Answer 13

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

* Nota: También necesitará extender jQuery para agregar una función unwrapInner () ya que no se proporciona de manera predeterminada.

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

Answer 14

Si estás tratando de hacer esto con el texto en un cuadro de selección o si esos dos no funcionan, prueba este:

$.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 agarrar el texto primero

Answer 15

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

también, 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?

Answer 16

después de perseguir a un fantasma durante dos días, tratando de descubrir por qué el ancho de un texto era incorrecto, me di cuenta de que era debido a espacios en blanco en la cadena de texto que detendrían el cálculo del ancho.

entonces, otro consejo es verificar si los espacios en blanco están causando problemas. utilizar

 

espacio sin interrupciones y ver si eso lo arregla.

las otras funciones que la gente sugería también funcionaban bien, pero eran los espacios en blanco los que causaban problemas.

Answer 17

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 la etiqueta, por lo tanto, mi solución debe ser 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;
}

Answer 18

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

Answer 19

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 sobre la de Rune, que no usa .html tan a la ligera

Answer 20

$.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 un trazador de líneas. Te da el primer personaje

Answer 21

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