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(' ');
}
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(' ');
}
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ños diferentes</span>
<br/>su tamaño es de: <span id="tam"></span>px
</body>
</html>Sugerencias para mejorar el plugin siempre bienvenidas
¿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.
Por masterojitos el 14 de Septiembre de 2012
Por aapf_92 el 14 de Septiembre de 2012
El problema de este plugin es que es muy lento con textos largos.
Por Anibal el 14 de Septiembre de 2012
Por aapf_92 el 14 de Septiembre de 2012