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>…</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">…</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">…</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.