Foros del Web » Creando para Internet » CSS »

Enlaces largos

Estas en el tema de Enlaces largos en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/12/2004, 23:30
Avatar de JJRC  
Fecha de Ingreso: enero-2003
Ubicación: Argentina
Mensajes: 261
Antigüedad: 14 años, 11 meses
Puntos: 1
Enlaces largos

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.
__________________
El dinero no te cambia, te delata...
  #2 (permalink)  
Antiguo 06/01/2005, 00:16
Avatar de JJRC  
Fecha de Ingreso: enero-2003
Ubicación: Argentina
Mensajes: 261
Antigüedad: 14 años, 11 meses
Puntos: 1
¿Alguien puede darme una mano con esto?
__________________
El dinero no te cambia, te delata...
  #3 (permalink)  
Antiguo 06/01/2005, 04:35
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
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,
  #4 (permalink)  
Antiguo 07/01/2005, 14:47
Avatar de Scour  
Fecha de Ingreso: octubre-2003
Ubicación: Murcia (España)
Mensajes: 94
Antigüedad: 14 años, 1 mes
Puntos: 0
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.

Última edición por Scour; 07/01/2005 a las 14:58
  #5 (permalink)  
Antiguo 09/01/2005, 13:23
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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
  #6 (permalink)  
Antiguo 09/01/2005, 13:36
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
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,
  #7 (permalink)  
Antiguo 11/01/2005, 18:22
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
¡ 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
  #8 (permalink)  
Antiguo 13/01/2005, 12:20
Avatar de juque  
Fecha de Ingreso: marzo-2002
Ubicación: Temuco, Chile
Mensajes: 84
Antigüedad: 15 años, 8 meses
Puntos: 0
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;
?>
__________________
~~
www.juque.cl
  #9 (permalink)  
Antiguo 24/01/2005, 11:26
Avatar de JJRC  
Fecha de Ingreso: enero-2003
Ubicación: Argentina
Mensajes: 261
Antigüedad: 14 años, 11 meses
Puntos: 1
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!
__________________
El dinero no te cambia, te delata...

Última edición por JJRC; 24/01/2005 a las 11:43 Razón: Olvide agregar algo
  #10 (permalink)  
Antiguo 10/03/2005, 18:05
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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?

Última edición por furoya; 06/11/2005 a las 08:04
  #11 (permalink)  
Antiguo 09/11/2005, 11:52
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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

Última edición por furoya; 22/01/2009 a las 09:11 Razón: actualización.
  #12 (permalink)  
Antiguo 09/11/2005, 18:28
Avatar de JJRC  
Fecha de Ingreso: enero-2003
Ubicación: Argentina
Mensajes: 261
Antigüedad: 14 años, 11 meses
Puntos: 1
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...
__________________
El dinero no te cambia, te delata...
  #13 (permalink)  
Antiguo 10/11/2005, 11:03
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
muy ingenioso pero no funciona en ff :(
si pones dtd en xhtml tampoco funciona en explorer

Última edición por CORE; 10/11/2005 a las 12:26
  #14 (permalink)  
Antiguo 10/11/2005, 11:18
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
¿ 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.
  #15 (permalink)  
Antiguo 11/11/2005, 14:59
Avatar de JJRC  
Fecha de Ingreso: enero-2003
Ubicación: Argentina
Mensajes: 261
Antigüedad: 14 años, 11 meses
Puntos: 1
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.
__________________
El dinero no te cambia, te delata...
  #16 (permalink)  
Antiguo 12/11/2005, 13:03
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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.
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 20:51.