Enlaces largos

JJRC · #1 (**permalink**) 27/12/2004, 23:30

Quisiera saber como hago para que los enlaces largos se simplifiquen con puntos suspensivos. Sería algo así:

www.cualquiersitio.com/index.php...id50gallery

Me dijeron que desde el css se puede hacer pero no se me ocurre como...

Gracias.

JJRC · #2 (**permalink**) 06/01/2005, 00:16

¿Alguien puede darme una mano con esto?

JavierB · #3 (**permalink**) 06/01/2005, 04:35

Hola JJRC

Como ya ha pasado bastante tiempo desde que pusiste tu mensaje y no has tenido respuesta, me temo que nadie por aquí sabemos como se puede hacer. Desde luego con Css no me suena en absoluto.

¿Sabes de alguna página donde lo hagan para echarle un vistazo?

Saludos,

Scour · #4 (**permalink**) 07/01/2005, 14:47

Con CSS, que yo sepa, es imposible lo que pretendes. CSS puede formatear el texto, es decir, manipular el aspecto visual, también puede ocultar texto, puede escribir o poner imágenes antes o despues de una etiqueta con el atributo content (y no funciona en IE), pero no puede ocultar letras sueltas.

Lo más parecido a lo que pretendes, con CSS sería esto:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Puntos...</title>
<style type="text/css">
#capa a span {
	display:none;
}
</style>
</head>

<body>
<div id="capa">
<a href="http://www.forosdelweb.com/showthread.php?t=257363">http://www.forosdelweb<span>.com/showthread.</span>...php?t=257363</a>
</div>
</body>
</html>

Como ves, tienes que poner la etiqueta <span> manualmente, y los 3 puntos suspensivos también, cosa bastante tediosa. Ahora bien, si tu web utiliza algún lenguaje del lado del servidor (php, java, asp, asp.net...) puedes hacer una función que contabilice las letras del texto entre la apertura y cierre de la etiqueta <a>, y si supera 'X' número, que escriba el <span> y los puntos suspensivos, yentonces si, con el CSS especificado funcionaría de modo que se haría todo automáticamente.

Un saludo.

furoya · #5 (**permalink**) 09/01/2005, 13:23

Hola todos :

spur : tomé tus ideas e intenté primero agregar el SPAN después de a:hover o a:visited para que se lo viera luego de pasar el puntero o el click. Pero no me salió; tampoco sé si se puede ... aunque este foro lo hace.

Lo de formatear el texto me salió con JS.

Código:

 

<HTML><HEAD>
<script>
var ancla , nombreEnlace0 , nombreEnlace1 , comienzoNombre , finalNombre  ;
function cortaLink(){
enlaces = document.getElementsByTagName("a").length;
	//alert(enlaces );
for(i=0;i<enlaces;i++){
ancla = document.getElementsByTagName("a").item(i);
	//alert(ancla)
var nombreEnlace0=ancla.innerText;
	//alert(nombreEnlace0);
if(nombreEnlace0.length>10){
nombreEnlace1 = nombreEnlace0;
	//alert(nombreEnlace1);
comienzoNombre=nombreEnlace1.slice(0,5);
finalNombre =nombreEnlace1.slice(nombreEnlace1.length-5);
nombreEnlace1=comienzoNombre+'...'+finalNombre;
ancla.title="\""+nombreEnlace0 +"\" "+ ancla.title;
//alert(nombreEnlace1)
}
ancla.innerHTML=nombreEnlace1;
}
}
//onload = cortaLink
</script>
</HEAD>
<BODY>
<a href="qwer" title="Un Enlace" onclick="return false">01234567890123456789</a><br>
<a href="asdf" title="Otro Enlace" onclick="return false">ABCDEFGHIJKLMNOPQ</a>

</BODY></HTML>

JJRC : trata de probarlo en varios navegadores, porque temo que solamente funcione en IExplorer. (yo lo probé en IE6).

JavierB :

Cita:

Como ya ha pasado bastante tiempo desde que pusiste tu mensaje ...

es cierto ¡juro que no lo vi!

saludos

furoya

JavierB · #6 (**permalink**) 09/01/2005, 13:36

Hola furoya

Un nuevo

porque sueles acertar donde los demás ni siquiera sabemos por donde empezar.

Cita:

JJRC : trata de probarlo en varios navegadores, porque temo que solamente funcione en IExplorer. (yo lo probé en IE6).

Temes bien, pero se soluciona cambiando la línea:

var nombreEnlace0=ancla.innerText;

por:

var nombreEnlace0=ancla.innerHTML;

Saludos,

furoya · #7 (**permalink**) 11/01/2005, 18:22

¡ Gracias JavierB ! ( por las palmetas y por la corrección )

No puedo creer que haya estado tan cerca de hacer un código que sirviera para algún otro navegador !.

Bueno, igual debo hacer algunas modificaciones. Me olvidé que estamos en CSS y aquí no es "obligatorio" saber que la doble barra es para anular las líneas.

La página abre tal cual se vería sin el escript. La línea que lo ejecuta al cargarse la página es

onload = cortaLink

pero está anulada con "//"; hay que borrarlas para que funcione.
Lo mismo ocurre con las alertas, pero éstas solamente sirven para seguir los pasos del escript, no son necesarias y se pueden eliminar completamente.
La primera cuenta la cantidad de enlaces que hay en el documento, las siguientes muestran cada una de las rutas, el nombre, la confirmación del nombre que se va a agregar al título del enlace y el nombre reducido.

Al cambiar innerText no van a quedar excluidos los enlaces con etiquetas internas (p.e. una imagen), así que hice una nueva versión que incluye ambos cambios

Código:

 
<HTML><HEAD>
<script>
var ancla , nombreEnlace0 , nombreEnlace1 , comienzoNombre , finalNombre , etiqueta;

function cortaLink(){
enlaces = document.getElementsByTagName("a").length;
	//alert(enlaces );
for(i=0;i<enlaces;i++){
ancla = document.getElementsByTagName("a").item(i);
	//alert(ancla);
var nombreEnlace0 =ancla.innerHTML;
	//alert(nombreEnlace0);
etiqueta = nombreEnlace0.indexOf("<");
	//alert(etiqueta);
if(nombreEnlace0.length>13 && etiqueta==-1){
nombreEnlace1 = nombreEnlace0;
	//alert(nombreEnlace1);
comienzoNombre=nombreEnlace1.slice(0,5);
finalNombre =nombreEnlace1.slice(nombreEnlace1.length-5);
nombreEnlace1=comienzoNombre+'...'+finalNombre;
ancla.title="\""+nombreEnlace0 +"\" "+ ancla.title;
	//alert(nombreEnlace1)
ancla.innerHTML=nombreEnlace1;
}
}
}
//onload = cortaLink
</script>
</HEAD>
<BODY>
<a href="www.un_enlace.net" title="Un Enlace">01234567890123456789</a><br>
<a href="www.otro_enlace.net" title="Otro Enlace">ABCDEFGHIJKLMNOPQ</a><br>
<a href="www.imagen_enlace.net" title="Enlace con Imagen">
<img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" height="100"></a>

</BODY></HTML>

La nueva alerta que tiene un número avisa si existe la etiqueta interna; -1 es 'no', cualquier otro es 'sí'.

saludos

furoya

juque · #8 (**permalink**) 13/01/2005, 12:20

Y que hay con PHP, creo que en una línea de código se puede solucionar tu problema:

Código PHP:

  <?php

$url="http://este/es/un/link/muy/pero/muy/largo.html";

echo strlen($url) > 20 ? substr($url,0,20)."..." : $url;

?>

JJRC · #9 (**permalink**) 24/01/2005, 11:26

No conteste antes porque por algún motivo no me llegó la notificación de respuesta.

Mi intención es utilizarlo en un foro phpBB que tengo, en el cual algunos usuarios postean directamente enlaces que muchas veces son muy largos y me desvirtua el diseño del foro.

Como vi que este vBulletin simplifica las url largas, pense que podía aplicarla a mi foro.

Voy a intentar cargar el script en el header de mi Web y les cuento como me fue.

Muchas gracias!

furoya · #10 (**permalink**) 10/03/2005, 18:05

Hola de nuevo :

Ah!, bueno. Si es un foro PHP creo que lo mejor es usar PHP como dice juque.

Lo que tiene que escribir el PHP es el CSS que no me salía. Pero ahora sí

Código:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />

<title>ACORTA LOS NOMBRES DE ENLACE.</title>
<style type="text/css">
#menu1 a span {display:none;}

#menu1 a:hover {color:red}

#menu1 a:hover span {display:inline}


#menu2 a span {display:none;}

#menu2 a:hover {color:red}

#menu2 a:active span {display:inline}

</style>

</head>
<body>
<h2>Con CSS.</h2>
Enlace autoexpandible con hover
<div id="menu1">
<a href="javascript:void(0)">Enlace
<span>muy, muy, muy, pero MUY, MUY, MUY </span>largo.</a><br />
<a href="javascript:void(0)">A B C D E 
<span>F G H I J K  </span>L M N &Ntilde; O .</a><br />
</div>

<br /><br />

Enlace autoexpandible con active
<div id="menu2">
<a href="javascript:void(0)">Enlace
<span>muy, muy, muy, pero MUY, MUY, MUY </span>largo.</a><br />
<a href="javascript:void(0)">A B C D E 
<span>F G H I J K  </span>L M N &Ntilde; O .</a><br />
</div>

</body></html>

saludos

furoya

¿innerText solo funciona en IE?

furoya · #11 (**permalink**) 09/11/2005, 11:52

Hola una vez màs :

Encontré una versión (supongo que también propietaria de IE6) para hacer ellipsis con CSS.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD>

<style type="text/css">
a:link {width: 120px; height: 2em; border: 2px solid black; color:blue; overflow: hidden; text-overflow: ellipsis; }

a:visited {width: 120px; height: 2em; border: 2px solid black; color:blue; overflow: hidden; text-overflow: ellipsis; }

a:hover {width: auto; height: 2em; border: 2px solid black; color:red; }

a:active {width: auto; height: 2em; border: 2px solid black; color:green; }

</style>
</HEAD>
<BODY>


<a 
href="http://www.forosdelweb.com/" target="_blank" title="Enlace_muy_pero_muy_largo_a_los_Foros_del_Web. 
http://www.forosdelweb.com/">
Enlace_muy_pero_muy_largo_a_los_<strong>Foros_del_Web</strong>.
</a> 

<br /><br />

<a 
href="http://www.forosdelweb.com/" target="_blank" title="Enlace_muy_pero_muy_largo_a_los_Foros_del_Web. 
http://www.forosdelweb.com/">
Enlace_muy_pero_muy_largo_a_los_<strong>Foros_del_Web</strong>.
</a> 

</BODY></HTML>

texto que sobrepasa div

saludos

furoya

JJRC · #12 (**permalink**) 09/11/2005, 18:28

Cita:

Iniciado por furoya

Hola una vez màs :

Encontré una versión (supongo que también propietaria de IE6) para hacer ellipsis con CSS.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>

<style>
a:link {width: 120px; height: 2em; border: 2px solid black; color:blue; overflow: hidden; text-overflow: ellipsis; }

a:visited {width: 120px; height: 2em; border: 2px solid black; color:blue; overflow: hidden; text-overflow: ellipsis; }

a:hover {width: auto; height: 2em; border: 2px solid black; color:red; }

a:active {width: auto; height: 2em; border: 2px solid black; color:green; }

</style>
</HEAD>
<BODY>


<a 
href="http://www.forosdelweb.com/" target="_blank" title="Enlace_muy_pero_muy_largo_a_los_Foros_del_Web. 
http://www.forosdelweb.com/">
Enlace_muy_pero_muy_largo_a_los_<strong>Foros_del_Web</strong>.
</a> 

<br /><br />

<a 
href="http://www.forosdelweb.com/" target="_blank" title="Enlace_muy_pero_muy_largo_a_los_Foros_del_Web. 
http://www.forosdelweb.com/">
Enlace_muy_pero_muy_largo_a_los_<strong>Foros_del_Web</strong>.
</a> 


</BODY></HTML>

saludos

furoya

Ingenioso...

CORE · #13 (**permalink**) 10/11/2005, 11:03

muy ingenioso pero no funciona en ff :(
si pones dtd en xhtml tampoco funciona en explorer

furoya · #14 (**permalink**) 10/11/2005, 11:18

¿ Alguien sabe si está aunque más no sea en el borrador de CSS3 ?. Porque si es asì es cuestión de tiempo para que al menos Mozilla lo adopte.

JJRC · #15 (**permalink**) 11/11/2005, 14:59

Cita:

Iniciado por CORE

muy ingenioso pero no funciona en ff :(
si pones dtd en xhtml tampoco funciona en explorer

Yo hice un F12 en DreamWeaver y funciona bien con IE6.

El tema es que no es el tipo de resúmen de enlace que tenía en mente.

furoya · #16 (**permalink**) 12/11/2005, 13:03

Bien. Debe ser un invento de MS. Cuando Firefox lo incorpore, me parece que no va a usar un caracter sino una imagen; como hace para reemplazar los caracteres fuera del ASCII.

Empecé a escribir una versión más en CSS ( sin javascript ) que hiciera lo mismo en IE5x y Mozilla; cuando iba por el primer intento pensé -"¡Pero alguien ya lo tiene que haber hecho!".
Y así fue.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html>
<head>
<title></title>
<style>
dt{
font-size: 120%; 
margin-bottom: 1em; 
}
dd{
font-size: 100%;
width: 10em;	/* constrain width try 20em */
height: 1em;	/* constrain height */
line-height:1em;	/* to be adjusted */
overflow: hidden;	/* hide excess */
position:relative;	/* Fix IE missing overflow bug of r.p. span */
background: white;
}

dd a {
float:left;
white-space: nowrap;	/* prevents Opera's wrapping of the link and 
 destroying the r.p. */
}

dd span.ellipsis {
float: right;	/* shall drop when the link is too long */
position:relative;	/* move after page flow is done */
margin-top:-1em;	/* adjust */
z-index:1;	/* higher layer */
background: white;
width:1em;
}

</style>
</head>
<body>
<h2>Con <i>ellipsis</i> simulada.</h2>

<dt>Enlaces que terminan con "<strong>&#8230;</strong>".</dt>
<dd>
   <a href="http://archivist.incutio.com/viewlist/css-discuss/57452"
	title="http://archivist.incutio.com/viewlist/css-discuss/57452
Enlace_corto.">
   Enlace_corto.
   </a>
   <span class="ellipsis">&#8230;</span>
</dd>
<dd>
   <a href="http://archivist.incutio.com/viewlist/css-discuss/57452"
	title="http://archivist.incutio.com/viewlist/css-discuss/57452
Nombre_de_enlace_largo_para_el_sitio_donde_está_el_código_original.">
   Nombre_de_enlace_largo_para_el_sitio_donde_está_el_código_original.
   </a>
   <span class="ellipsis">&#8230;</span>
</dd>

</body>
</html>

Un par de aclaraciones sobre los comentarios del código.

/* prevents Opera's wrapping of the link and destroying the r.p. */ : es porque en algún momento el único navegador que reconocía white-space: nowrap; era Opera; hoy lo deben aceptar todos. Para versiones viejas ( como IE5 ) se puede rodear el enlace con etiquetas <nobr>.

/* constrain width try 20em */ : ésto tiene que ver con el anterior. Cuando no podía evitarse el ajuste de línea con CSS, al llegar el texto a su límite, continuaba en la línea de abajo. El efecto inmediato era empujar el span con los puntos suspensivos a la segunda línea; pero si el texto era lo bastante grande como para ocupar también esa segunda, el span terminaba en la tercera; y como el margin-top es de 1em, se tendría que ver sobre la segunda. Es decir, no se vería por el overflow:hidden.
El cálculo para el ancho máximo real del texto era entonces

2dd_width - span_width

Por supuesto que con el white-space: nowrap; funcionando ya no tiene sentido preocuparse.