Simuler le text-overflow pour un LIEN

Version imprimable

20/01/2011, 14h20
drumtof

Simuler le text-overflow pour un LIEN

Bonjour à tous,

J'ai dans un <td> un liste de lien qui peuvet être bcp trop long, je voudrais donc les tronquer à partir de 80% de la taille de mon td et accoler "..." pour montrer qu'ils ont été tronqués.

Sachant que la fonctionnalité text-overflow:ellipsis ne fonctionne que pour IE, j'ai suivi le tuto suivant explicant sa mise en place sous IE et FF mais pour un TEXTE : emulate text-overflow

Mon problème c'est que je n'arrive pas à retranscrire cet exemple du texte vers mon lien !!!

Quelqu'un pourrais-t-il me guider ?

Merci d'avance.
20/01/2011, 14h40
ornitho13

Peux tu mettre ton code pour voir ce qui ne va pas (html + css) ?

1 pièce(s) jointe(s)

Voici en pj mon fichier brute en sachant qu'il est incorporer dans plein d'autre frame, je pense vas que cela va bcp t'aider.

Le mieux serais de m'expliquer simplement dans un tableau avec un lien long :
Code:

1 2 3 4 5 6 7 8 9 10 11 <table width="100%" border="0" cellspacing="0" > <tbody> <tr> <td width="*"> <a title="essai" href="#" onclick="javascript:window.open('www.google.fr');"> mzljfzmùfljfùlmsdkjgùmlsjgùlmjsdgjgùgkjsdùgkdjsùgkljdgsdkgjgmldkjglmkdgjlmsdkgjsldjkgs </a> </td> </tr> </tbody> </table>

20/01/2011, 15h06
mikah
Bonjour,

je pense que tu devrais utiliser du PHP avec la fonction substr() exemple :
Code:

1 2 3 4 5 6 7 8 9 10 <?php $lien = 'tonlienmegalongavecbeaucoupdecaracteres.html' ?> <a href="<?php echo $lien;?>"> <?php echo substr($lien,0,20); if (strlen($lien)>=20) echo '...'; ?> </a>
La première fonction te permet de tronquer ton lien, la seconde permet de vérifier si ton lien a été tronqué et si tel est le cas de rajouter "..."
20/01/2011, 15h09
drumtof

Je ne code pas en php .... au pire en JS mais c'est tout !!!
20/01/2011, 15h13
mikah

Si tu n'utilises pas de PHP c'est que tu mets tout en dur, donc tu peux les tronquer à la main tes liens :D
20/01/2011, 15h48
drumtof

Citation:

Envoyé par mikah

Si tu n'utilises pas de PHP c'est que tu mets tout en dur, donc tu peux les tronquer à la main tes liens :D

Il me semble que l'on peut programmer avec d'autre language que le php :roll: ..... mais merci quand même la question reste ouvert.
20/01/2011, 16h08
mikah

Il est vrai, toutes mes excuses, quel langage utilises-tu ?

voici une solution à ton problème:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<table border="1" cellspacing="0" cellpadding="0">
		<tbody>
			<tr>		
				<td>
					<span class="ellipsis">
					     <a title="essai" href="#" onclick="window.open('www.google.fr');">
					     	mzljfzmùfljfùlmsdkjgùmlsjgùlmjsdgjgùgkjsdùgkdjsùgkljdgsdkgjgmldkjglmkdgjlmsdkgjsldjkgs
					     </a>
				     </span>
				</td>
			</tr>
		</tbody>
	</table>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
table, td{
	display:block;
	width:200px;
	overflow:hidden;
}
.ellipsis a {
   white-space:nowrap;
   text-overflow:ellipsis; /* for internet explorer */
   overflow:hidden;
   width:190px;
   display:block;
}
 
html>body .ellipsis {
   clear:both;
}
 
html>body .ellipsis a {
   content: "...";
}
html>body .ellipsis a {
   max-width:180px;
   width:auto !important;
   float:left;
}

je me suis contenté de réutiliser le lien que tu avais fourni et j'ai comparé avec ce que tu avais fait. il te manquait 2-3 éléments pour que cela fonctionne correctement ;)

20/01/2011, 17h00
drumtof

c'est un prologiciel de GED que je paramètre et qui embarque : htm(avec free marker) , css, js, java, oracle, pl/sql
20/01/2011, 18h47
drumtof

1 pièce(s) jointe(s)

Je doit être c.. :aie: mais j'ai fait un script tout bête (en pj) et il fonctionne sous IE mais sous FF le :after ne m'ajoute pas les "..." après le lien tronquer ??
21/01/2011, 09h44
drumtof

1 pièce(s) jointe(s)

J'ai trouver mon erreur. En fait pour que le pseudo élément after soit interpréter il ne faut pas le mettre dans le head mais dans le body et la simulation FF pour le text-overflow marche impeccable.

Voici l'exemple en pj.

Merci à tous !!