Foros del Web » Programando para Internet » Javascript »

Recortar cadena de texto por pixeles

Estas en el tema de Recortar cadena de texto por pixeles en el foro de Javascript en Foros del Web. Buenas!!!! Haber os comento, tengo una cadena de texto, y querría cortarla por tamaño de pixeles, no por el numero de letras, ya que eso ...
  #1 (permalink)  
Antiguo 31/03/2011, 11:01
 
Fecha de Ingreso: mayo-2010
Mensajes: 61
Antigüedad: 14 años, 6 meses
Puntos: 1
Recortar cadena de texto por pixeles

Buenas!!!!

Haber os comento, tengo una cadena de texto, y querría cortarla por tamaño de pixeles, no por el numero de letras, ya que eso es lo que hago, pero lo que me pasa es que hay cadenas de textos que al usar mayuscular, w, etc... que ocupan mas pixeles pues la frase me ocupa 2 lineas.

En definitiva, lo que querría es saber como crear una función en javascript para que pasandole la cadena de texto y el número máximo de pixeles me la acorte y me ponga unos puntos suspensivos al final, para asi no me cree dos líneas, sino siempre una.

espero haberme explicado bien.

Un saludo y gracias de antemano
  #2 (permalink)  
Antiguo 31/03/2011, 11:09
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 5 meses
Puntos: 834
Respuesta: Recortar cadena de texto por pixeles

Lo que podés hacer es verificar si va a ocupar más de 1 renglón y entonces recortarlo:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<
html xmlns="http://www.w3.org/1999/xhtml"
<
head
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<
title>test</title
<
script
Array.
prototype.inArray=function(el){ 
    for(var 
i=0,l=this.length;i<l;i++) 
        if(
this[i]==el
            return 
true
    return 
false

onload=function(){ 
    var 
txt='<span>'+document.getElementById('ej').innerHTML.split('').join('</span><span>')+'</span>'
    
document.getElementById('ej').innerHTML=txt
    var 
t=''
    var 
cuenta=[]; 
    for(var 
i=0l=document.getElementById('ej').getElementsByTagName('span'),ll=l.length;i<ll;i++){ 
        if(!
cuenta.inArray(l[i].offsetTop)) 
            
cuenta.push(l[i].offsetTop); 
        if(
cuenta.length<2
            
t+=l[i].innerHTML
        else{
            if(
document.getElementById('ej').innerHTML.length>t.length)
            
t+='...';
            break;
        }
    } 
    
document.getElementById('ej').innerHTML=t

</script>   
</head> 

<body> 
<div id="ej" style="width:300px;">Lorm ipsum dolor sit amet, consecteuer adipi scing elit. Nulla ante arcu, scelerisque ut, imperdiet nec, aliquet et, magna. Cras mauris odio, volutpat quis, aliquam in, lacinia at, arcu. Nulla vitae magna vitae erat aliquam ultricies. Vestibulum euismod nisl eget augue. Donec magna. Sed porttitor, libero ac egestas pharetra, velit augue scelerisque nunc, convallis rhoncus elit est et enim. Proin pulvinar condimentum wisi. Nullam quis nulla. Etiam elementum, nunc a t lacinia condimentum, nunc neque nonummy wisi, sit amet volutpat est purus id massa. Nunc purus wisi, fringilla id, accumsan ac, lobortis nec, arcu. Integer sagittis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut suscipit fermentum ligula. Suspendisse posuere. Donec varius, ipsum sit amet ultricies iaculis, magna nisl hendrerit libero, ac ultrices orci lacus eget neque.

Maecenas tellus enim, convallis euismod, interdum sed, pharetra et, libero. Nam suscipit nisl nec ligula. Nullam vitae risus quis neque rutrum sollicitudin. Fusce sed nulla. Integer posuere sapien et turpis. Donec dui ipsum, vulputate vitae, nonummy at, fringilla non, justo. Aliquam quis urna non nunc pulvinar aliquam. Cras libero. Quisque nec wisi vitae tellus tincidunt congue. Fusce vulputate dolor in pede. Maecenas sollicitudin molestie sem. Aenean sagittis, metus ut blandit pharetra, lorem justo gravida felis, in adipiscing eros at magna. Nunc porta odio non felis. Quisque posuere faucibus ipsum. Phasellus nibh augue, tempus vitae, euismod ut, gravida a, leo. Donec felis. </div>
</body> 
</html> 
  #3 (permalink)  
Antiguo 01/04/2011, 02:13
 
Fecha de Ingreso: mayo-2010
Mensajes: 61
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: Recortar cadena de texto por pixeles

Cita:
Iniciado por Panino5001 Ver Mensaje
Lo que podés hacer es verificar si va a ocupar más de 1 renglón y entonces recortarlo:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<
html xmlns="http://www.w3.org/1999/xhtml"
<
head
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<
title>test</title
<
script
Array.
prototype.inArray=function(el){ 
    for(var 
i=0,l=this.length;i<l;i++) 
        if(
this[i]==el
            return 
true
    return 
false

onload=function(){ 
    var 
txt='<span>'+document.getElementById('ej').innerHTML.split('').join('</span><span>')+'</span>'
    
document.getElementById('ej').innerHTML=txt
    var 
t=''
    var 
cuenta=[]; 
    for(var 
i=0l=document.getElementById('ej').getElementsByTagName('span'),ll=l.length;i<ll;i++){ 
        if(!
cuenta.inArray(l[i].offsetTop)) 
            
cuenta.push(l[i].offsetTop); 
        if(
cuenta.length<2
            
t+=l[i].innerHTML
        else{
            if(
document.getElementById('ej').innerHTML.length>t.length)
            
t+='...';
            break;
        }
    } 
    
document.getElementById('ej').innerHTML=t

</script>   
</head> 

<body> 
<div id="ej" style="width:300px;">Lorm ipsum dolor sit amet, consecteuer adipi scing elit. Nulla ante arcu, scelerisque ut, imperdiet nec, aliquet et, magna. Cras mauris odio, volutpat quis, aliquam in, lacinia at, arcu. Nulla vitae magna vitae erat aliquam ultricies. Vestibulum euismod nisl eget augue. Donec magna. Sed porttitor, libero ac egestas pharetra, velit augue scelerisque nunc, convallis rhoncus elit est et enim. Proin pulvinar condimentum wisi. Nullam quis nulla. Etiam elementum, nunc a t lacinia condimentum, nunc neque nonummy wisi, sit amet volutpat est purus id massa. Nunc purus wisi, fringilla id, accumsan ac, lobortis nec, arcu. Integer sagittis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut suscipit fermentum ligula. Suspendisse posuere. Donec varius, ipsum sit amet ultricies iaculis, magna nisl hendrerit libero, ac ultrices orci lacus eget neque.

Maecenas tellus enim, convallis euismod, interdum sed, pharetra et, libero. Nam suscipit nisl nec ligula. Nullam vitae risus quis neque rutrum sollicitudin. Fusce sed nulla. Integer posuere sapien et turpis. Donec dui ipsum, vulputate vitae, nonummy at, fringilla non, justo. Aliquam quis urna non nunc pulvinar aliquam. Cras libero. Quisque nec wisi vitae tellus tincidunt congue. Fusce vulputate dolor in pede. Maecenas sollicitudin molestie sem. Aenean sagittis, metus ut blandit pharetra, lorem justo gravida felis, in adipiscing eros at magna. Nunc porta odio non felis. Quisque posuere faucibus ipsum. Phasellus nibh augue, tempus vitae, euismod ut, gravida a, leo. Donec felis. </div>
</body> 
</html> 
Muchas Gracias Panino 5001, esto es precisamente lo que necesito, pero... tengo un problema que no he conseguido resolver.

Haber yo en mi proyecto no puedo utilizar las etiquetas <div></div>, ya que estas etiquetas iphone, Ipad y demás desconfigura la Web. ¿Como podria solucionar mi problema?

Bastaría con probar con otra etiqueta, pero yo he probado a cambiar el div por un span pero..... no me recorta al cabo de X pixeles, me recorta a la que acaba la primera línea, es decir, con span no me funciona correctamente.

Bueno creo que estoy cerca de solucionarlo, y muchas gracias otra vez panino 5001
  #4 (permalink)  
Antiguo 01/04/2011, 09:54
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 5 meses
Puntos: 834
Respuesta: Recortar cadena de texto por pixeles

Para que los divs se comporten como span basta con css:
Código PHP:
<style>
div{display:inline;}
</
style
  #5 (permalink)  
Antiguo 01/04/2011, 10:10
 
Fecha de Ingreso: mayo-2010
Mensajes: 61
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: Recortar cadena de texto por pixeles

Gracias Panino por tu respuesta.

Pero si escribo eso me hace lo mismo que si pusiera un span, es decir, me lo pone en toda la linea y no me lo recorta.
Mi codigo es:

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<
html xmlns="http://www.w3.org/1999/xhtml"
<
head
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<
title>test</title
<
style>
div{display:inline;}
</
style>  
<
script
Array.
prototype.inArray=function(el){ 
    for(var 
i=0,l=this.length;i<l;i++) 
        if(
this[i]==el
            return 
true
    return 
false

onload=function(){ 
    
//alert(document.getElementById('ej').innerHTML);
    
var txt='<span>'+document.getElementById('ej').innerHTML.split('').join('</span><span>')+'</span>'
    
document.getElementById('ej').innerHTML=txt
    var 
t=''
    var 
cuenta=[]; 
    for(var 
i=0l=document.getElementById('ej').getElementsByTagName('span'),ll=l.length;i<ll;i++){ 
        if(!
cuenta.inArray(l[i].offsetTop)) 
            
cuenta.push(l[i].offsetTop); 
        if(
cuenta.length<2
            
t+=l[i].innerHTML
        else{
            if(
document.getElementById('ej').innerHTML.length>t.length)
            
t+='...';
            break;
        }
    } 
    
document.getElementById('ej').innerHTML=t

</script>   
</head> 

<body> 
Que puedo hacer??? gracias
  #6 (permalink)  
Antiguo 01/04/2011, 10:16
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 5 meses
Puntos: 834
Respuesta: Recortar cadena de texto por pixeles

Sí, es cierto. A lo que voy es que la web no debería desconfigurarse por usar divs u otros tags, ya que ese (el de la "desconfiguración") es un tema que deberías manejar con css. Porque si un div produce problemas de visualización, cualquier otro elemento de bloque lo hará de la misma manera a menos que lo controles con css. En otras palabras, tu problema no es de javascript en ese caso sino de maquetación.
  #7 (permalink)  
Antiguo 01/04/2011, 10:27
 
Fecha de Ingreso: mayo-2010
Mensajes: 61
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: Recortar cadena de texto por pixeles

Pero tengo entendido que las etiquetas <div> dan problemas en los Ipad, Ipod, IPhone y demás, es decir es como si no los ejecutaran o algo parecido y se bloquean y hacen cosas extrañas, de todas formas si es así como hay que hacerlo lo haré así, muchas gracias.
  #8 (permalink)  
Antiguo 01/04/2011, 10:31
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 5 meses
Puntos: 834
Respuesta: Recortar cadena de texto por pixeles

No he tenido ningún problema usando divs en websites vistos en esos dispositivos. Tampoco en e-books.
  #9 (permalink)  
Antiguo 01/04/2011, 10:45
 
Fecha de Ingreso: mayo-2010
Mensajes: 61
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: Recortar cadena de texto por pixeles

Muy bien, muchas gracias por tu ayuda
  #10 (permalink)  
Antiguo 04/04/2011, 04:41
 
Fecha de Ingreso: mayo-2010
Mensajes: 61
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: Recortar cadena de texto por pixeles

Buenas!!!! He probado el código pero integrado donde lo necesito yo no me funciona.

queria preguntarte Panino que el primer codigo (el de abajo) para que sirve.

Código PHP:
<script language=""
Array.
prototype.inArray=function(el){ 
    for(var 
i=0,l=this.length;i<l;i++) 
        if(
this[i]==el
            return 
true
    return 
false

</script> 
Yo en mi Web le e puesto al body en el Onload que carge pie()

la función pie es :
Código PHP:
function pie(){ 
    
//alert(document.getElementById('ej').innerHTML);
    //alert("Hola");
    
var txt='<span>'+document.getElementById('ej').innerHTML.split('').join('</span><span>')+'</span>'
    
document.getElementById('ej').innerHTML=txt
    var 
t=''
    var 
cuenta=[]; 
    for(var 
i=0l=document.getElementById('ej').getElementsByTagName('span'),ll=l.length;i<ll;i++){ 
        if(!
cuenta.inArray(l[i].offsetTop)) 
            
cuenta.push(l[i].offsetTop); 
        if(
cuenta.length<2
            
t+=l[i].innerHTML
        else{
            if(
document.getElementById('ej').innerHTML.length>t.length)
            
t+='...';
            break;
        }
    } 
    
document.getElementById('ej').innerHTML=t

Y cuando llega a la consulta, donde voy a escribir el concierto, escribo la div con id ej.
El problema viene la cargo la página que no me hace caso, me escribe todo, y me da un errror con el firebug de que el document.getElementById("ej") is null. Cosa que al div lo llamo seguro id="ej".

Para simplificar, querria saber que es lo que hace el primer codigo y el porque no me encuentra el div id ej para poder arreglarlo

Un saludo y Gracias de antemano
  #11 (permalink)  
Antiguo 04/04/2011, 06:25
 
Fecha de Ingreso: mayo-2010
Mensajes: 61
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: Recortar cadena de texto por pixeles

Buenas de nuevo!!!!

Por fin funciona el código, he tenido que modificar una pequeña cosa, que comento por si a alguien le pasa.

Haber en mi div el id le ponia siempre ej, pero claro ese div al estar en while se repetía varias veces, por lo tanto al ir a buscarlo se hacía un lío con el contenido de esa div.

Tras mucho pensar me he dado cuenta, asique en el id del div concatenada un numero correlativo, es decir.

Código PHP:

while($fila=mysql_fetch_array($resul_eventos)){
          
$con_cal=$con_cal+1;
          
$f=$fila['fe'];//fechaconformato ($fila['dia0'],$fila['mes'],$fila['anio'],3);
          
$eventos.='<tr><td width=50 ><a class="min" href="calendario.php?fecha='.$fila['anio'].'-'.$fila['mes0'].'-'.$fila['dia'].'">'.$f.'</a></td><td class="prod-title"><a href="calendario_evento.php?idevento='.$fila['id_evento'].'"><span><div id="ej'.$con_cal.'" style="width:200px;">'.$fila['tit'].'</div></span></a></td></tr>';
    } 
Después también se me daba el caso de que yo le ponía en el Onload del index.php la función que recortaba la cadena, y me daba error. ya que la llamaba antes de que existieran los div de id ej...
por lo tanto la he llamado a la función acto seguido de crear los div, que tampoco sabía que se podia hacer eso simplemento con:

Código PHP:
<script>
pie();
</script> 
y en el index creo un script con la función pie, que es la que recorta, y cuando llamo a los div le concateno también el número correlativo para que lo encuentra:

Código PHP:
 <script language=""
Array.
prototype.inArray=function(el){ 
    for(var 
i=0,l=this.length;i<l;i++) 
        if(
this[i]==el
            return 
true
    return 
false

function 
pie(){ 
    
//alert(document.getElementById('ej').innerHTML);
    //alert("Hola");
    
var con_cal=1;
    while (
con_cal<=4)
    {
        
//alert (con_cal);
        
        
var txt='<span>'+document.getElementById('ej'+con_cal+'').innerHTML.split('').join('</span><span>')+'</span>'
        
document.getElementById('ej'+con_cal+'').innerHTML=txt
        var 
t=''
        var 
cuenta=[]; 
        for(var 
i=0l=document.getElementById('ej'+con_cal+'').getElementsByTagName('span'),ll=l.length;i<ll;i++){ 
            if(!
cuenta.inArray(l[i].offsetTop)) 
                
cuenta.push(l[i].offsetTop); 
            if(
cuenta.length<2
                
t+=l[i].innerHTML
            else{
                if(
document.getElementById('ej'+con_cal+'').innerHTML.length>t.length)
                
t+='...';
                break;
            }
        } 
        
document.getElementById('ej'+con_cal+'').innerHTML=t
        
con_cal++;
    }

</script> 
Espero poder ayudar a alguien con esto, ya que yo llevo mucho tiempo invertido para esta "tonteria".

Sólo me queda una duda aunque no es importante.

Que quiere decir el siguiente código??

Código PHP:
Array.prototype.inArray=function(el){ 
    for(var 
i=0,l=this.length;i<l;i++) 
        if(
this[i]==el
            return 
true
    return 
false

  #12 (permalink)  
Antiguo 04/04/2011, 07:12
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 5 meses
Puntos: 310
Respuesta: Recortar cadena de texto por pixeles

Pruébalo y concluye para qué sirve:
Código Javascript:
Ver original
  1. var array = ['abc', 2, true, null, {}, []];
  2. console.log(
  3.  array.inArray(2) + '\n' +
  4.  array.inArray(true) + '\n' +
  5.  array.inArray(void 0)
  6. );
Por cierto, (con el permiso de @Panino ) para que no dé problemas, inArray debería ser así:
Código:
Array.prototype.inArray = function(obj){ 
 for(var i = 0; act = this[i]; i++){
  if(act === obj){ return true; }
 }
 return false; 
}
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #13 (permalink)  
Antiguo 04/04/2011, 08:01
 
Fecha de Ingreso: mayo-2010
Mensajes: 61
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: Recortar cadena de texto por pixeles

Buenas _cronos2, para que sirve todo este codigo???
  #14 (permalink)  
Antiguo 04/04/2011, 08:10
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 5 meses
Puntos: 834
Respuesta: Recortar cadena de texto por pixeles

Cita:
Iniciado por _cronos2 Ver Mensaje
Por cierto, (con el permiso de @Panino ) para que no dé problemas, inArray debería ser así:
Código:
Array.prototype.inArray = function(obj){ 
 for(var i = 0; act = this[i]; i++){
  if(act === obj){ return true; }
 }
 return false; 
}

Los array no tienen un método nativo que funcione en todos los navegadores para chequear si un elemento x es uno de sus miembros. Es por eso que lo agregamos "a mano" modificando su prototype. Y eso es lo que hace esa porcón de código: ayudarnos a ver si un valor dado es miembro del array o si no lo es.
  #15 (permalink)  
Antiguo 07/04/2011, 05:48
 
Fecha de Ingreso: mayo-2010
Mensajes: 61
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: Recortar cadena de texto por pixeles

Buenas de nuevo!!!

Haber esto va bien pero..... a surgido un problema.

Haber resulta que las palabras no las corta, es decir, parece que busca el espacio y apartir de el último que cabe pone los 3 puntos. Pero claro hay veces que por esos 3 puntos se pasan a otra linea.

La solución no está en bajar el numero de pixeles porque siempre acorta por una palabra entera, y a mi me da igual que corte una palabra a mitad.

He revisado el codigo para ver el funcionamiento y tal pero nada no encuentro la solución.

Entonces he pensado en Panino, sabrias decirme como puedo arreglarlo para que no me pase a una nueva linea, aunque me corte la palabra que no pasa nada.

Un saludo
  #16 (permalink)  
Antiguo 07/04/2011, 06:03
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 5 meses
Puntos: 834
Respuesta: Recortar cadena de texto por pixeles

Probá reemplazando, en el código que te pasé, esta línea:
Código PHP:
 t+='...'
por esta otra:
Código PHP:
t=(t.substr(0,t.length-3)+'...').split(' ...').join('...'); 
Esto básicamente es para restarle los 3 caracteres demás que suponen los puntos suspensivos que agregamos y para que si justo termina en un espacio la cadena cortada, también suprima ese espacio.
  #17 (permalink)  
Antiguo 07/04/2011, 08:12
 
Fecha de Ingreso: mayo-2010
Mensajes: 61
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: Recortar cadena de texto por pixeles

Muchíiiiiiiiiiiiiiiiiiiiisimas gracias Panino. ahora está bastante mejor. Pero tengo un "problema"

Mira por ponerte un ejemplo:

La frase es "Harry Sparnaay (clarinete bajo) Asociacion de Mujeres en la Musica."
y otras es: "PAJARO SUNRISE. Madrid (C.A.T.A .) C/Abdon Terradas, 3"

Pues bien a la hora de cortar me las corta de la siguiente forma:
Harry Sparnaay (clarinete baj...
PAJARO SUNRISE. Madrid (C.A.T...

La 2ª frase queda perfecta cortada, es decir, llega de principio a fin. Pero y porqué la primera se corta en el baj, siendo que aún podría seguir escribiendo algún caracter más?

Ya esto sería lo último que por ahora está muy bien pero bueno la perfección siempre es mejor jeje.

y una vez mas gracias.

Un saludo
  #18 (permalink)  
Antiguo 07/04/2011, 08:25
 
Fecha de Ingreso: mayo-2010
Mensajes: 61
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: Recortar cadena de texto por pixeles

Además he probado en todos los demás navegadores principales, y en el chrome y firefox se ve como las dos frases que te he nombrado arriba. pero en Internet explorer se muestra así:

Harry Sparnaay (clarinete bajo...
PAJARO SUNRISE. Madri...

Sabes porque??? lo siento por ser tan pesado
  #19 (permalink)  
Antiguo 07/04/2011, 12:52
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 5 meses
Puntos: 310
Respuesta: Recortar cadena de texto por pixeles

Cita:
Iniciado por Panino5001 Ver Mensaje
Código PHP:
t=(t.substr(0,t.length-3)+'...').split(' ...').join('...'); 
Sólo por curiosidad... ¿Qué es mejor, en cuando a rendimiento o rapidez?
Código Javascript:
Ver original
  1. t = (t.substr(0,t.length-3)+'...').split(' ...').join('...');
  2. t = (t.substr(0, t.length - 3) + '...').replace(/\s?(\.{3})$/, '$1');
Arrays vs RegExps
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #20 (permalink)  
Antiguo 07/04/2011, 22:46
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 5 meses
Puntos: 834
Respuesta: Recortar cadena de texto por pixeles

@adristb para que el script recorte por palabra hay que hacerle algunos cambios, pero ya te toca trabajar un poco a vos (o voy a pensar que en vez de aprender querés que te lo haga ).
En cuanto a las diferencias, se debe a que los navegadores no en todos los casos acomodan de la misma manera las palabras en el flujo del documento. El script inicial lo que hace es verificar hasta qué letra llega el renglón y cortar justo antes de la primera que se iría para abajo si estuviera escrita la palabra completa.
Luego le agregué la eliminación de las tres últimas letras para que no te queden afuera los puntos suspensivos.

@_cronos2: nunca hice la prueba (la verdad, en estos casos poco me interesa una diferencia tan pequeña y como las RegExp no son mi fuerte las evito cuando puedo ). No obstante (y confieso que me sorprende ), esto le da la ventaja a split & join en el caso que evalúa: http://jsperf.com/replace-vs-split-and-join/2
  #21 (permalink)  
Antiguo 07/04/2011, 23:39
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 14 años, 5 meses
Puntos: 310
Respuesta: Recortar cadena de texto por pixeles

Cita:
Iniciado por Panino5001 Ver Mensaje
@_cronos2: nunca hice la prueba (la verdad, en estos casos poco me interesa una diferencia tan pequeña y como las RegExp no son mi fuerte las evito cuando puedo ). No obstante (y confieso que me sorprende ), esto le da la ventaja a split & join en el caso que evalúa: http://jsperf.com/replace-vs-split-and-join/2
¿Qué navegador usaste para la prueba? Con FF4 y Chrome 10 son más rápidas las regexps, lo que yo ni me imaginaba es que había diferencia entre usar una literal y otra en una variable
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red

Etiquetas: recortar, cadenas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:33.