Simuler le text-overflow pour un LIEN [Résolu]

[drumtof]

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.

[ornitho13]

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

[drumtof]

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>

[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 "..."

[drumtof]

Je ne code pas en php .... au pire en JS mais c'est tout !!!

[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

[drumtof]

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

Il me semble que l'on peut programmer avec d'autre language que le php ..... mais merci quand même la question reste ouvert.

[mikah]

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

[ornitho13]

voici une solution à ton problème:

Code html :

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 css :

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

[drumtof]

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

[drumtof]

Je doit être c.. 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 ??

[drumtof]

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 !!