Comunidad de diseño web y desarrollo en internet online

Obtener el ancho en píxeles de un texto con jQuery

He creado este plugin en jQuery para obtener el tamaño de un texto y de esta forma, por ejemplo, recortar el texto después de una cantidad de píxeles para que se ajuste mejor en la estructura de la Web.

Coloca el siguiente código en tu web:

Código :

(function($){
    $.fn.pixelTextWidth = function(){
   $('body').append('<span style="display:none" id="charw"></span>');//Creamos un span oculto
        var texto = $(this).text();//obtenemos su texto
        var ancho = 0;
        for(var i = 0; texto.length > i; i++){
            if(texto[i] != ' '){//si el texto no es un espacio insertamos en el span el carácter
                $('#charw').text(texto[i]);
            }else{//si el texto es un espacio debemos hacer esto porque no los contará
                $('#charw').html('&nbsp;');
            }
            ancho += $('#charw').width();//Obtenemos el ancho en pixeles del span,
   }                                           //por lo tanto obtenemos el del caracter actual
        $('#charlen').remove();//borramos el span
        return ancho;//retornamos el ancho en pixels
    }
})(jQuery);


Lo siguiente nos devolverá el valor del ancho en píxeles:

Código :

 $valor = $('id del texto').pixelTextWidth();


Ejemplo completo


Código :

<html>
<head>
<script src="jquery.js" language="javascript" type="text/javascript"></script>
<script language="javascript">
(function($){
    $.fn.pixelTextWidth = function(){
   $('body').append('<span style="display:none" id="charw"></span>');
        var texto = $(this).text();
        var ancho = 0;
        for(var i = 0; texto.length > i; i++){
            if(texto[i] != ' '){
                $('#charw').text(texto[i]);
            }else{
                $('#charw').html('&nbsp;');
            }
            ancho += $('#charw').width();
   }
        $('#charlen').remove();
        return ancho;
    }
})(jQuery);

$(document).ready(function(){
        var val = $('#texto').pixelTextWidth();
   $('#tam').text(val);
});
</script>
</head>
<body>
    <span id="texto">Texto con caracteres de tama&ntilde;os diferentes</span>
    <br/>su tama&ntilde;o es de: <span id="tam"></span>px
</body> 
</html>


Sugerencias para mejorar el plugin siempre bienvenidas :wink:

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate