Foros del Web - Ver Mensaje Individual

adristb · #3 (**permalink**) 01/04/2011, 02:13

Cita:

Iniciado por Panino5001

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=0, l=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