IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Simuler le text-overflow pour un LIEN


Sujet :

CSS

  1. #1
    Membre confirmé
    Inscrit en
    Mai 2009
    Messages
    141
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 141
    Par défaut 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.

  2. #2
    Rédacteur

    Homme Profil pro
    Responsable de projet
    Inscrit en
    Mai 2009
    Messages
    634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de projet
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2009
    Messages : 634
    Par défaut
    Peux tu mettre ton code pour voir ce qui ne va pas (html + css) ?

  3. #3
    Membre confirmé
    Inscrit en
    Mai 2009
    Messages
    141
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 141
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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>
    Fichiers attachés Fichiers attachés

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France, Somme (Picardie)

    Informations forums :
    Inscription : Avril 2009
    Messages : 31
    Par défaut
    Bonjour,

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

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 "..."

  5. #5
    Membre confirmé
    Inscrit en
    Mai 2009
    Messages
    141
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 141
    Par défaut
    Je ne code pas en php .... au pire en JS mais c'est tout !!!

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France, Somme (Picardie)

    Informations forums :
    Inscription : Avril 2009
    Messages : 31
    Par défaut
    Si tu n'utilises pas de PHP c'est que tu mets tout en dur, donc tu peux les tronquer à la main tes liens

  7. #7
    Membre confirmé
    Inscrit en
    Mai 2009
    Messages
    141
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 141
    Par défaut
    Citation Envoyé par mikah Voir le message
    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.

  8. #8
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France, Somme (Picardie)

    Informations forums :
    Inscription : Avril 2009
    Messages : 31
    Par défaut
    Il est vrai, toutes mes excuses, quel langage utilises-tu ?

  9. #9
    Rédacteur

    Homme Profil pro
    Responsable de projet
    Inscrit en
    Mai 2009
    Messages
    634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de projet
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2009
    Messages : 634
    Par défaut
    voici une solution à ton problème:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  10. #10
    Membre confirmé
    Inscrit en
    Mai 2009
    Messages
    141
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 141
    Par défaut
    c'est un prologiciel de GED que je paramètre et qui embarque : htm(avec free marker) , css, js, java, oracle, pl/sql

  11. #11
    Membre confirmé
    Inscrit en
    Mai 2009
    Messages
    141
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 141
    Par défaut
    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 ??
    Fichiers attachés Fichiers attachés

  12. #12
    Membre confirmé
    Inscrit en
    Mai 2009
    Messages
    141
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 141
    Par défaut
    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 !!
    Fichiers attachés Fichiers attachés

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 26/10/2009, 13h32
  2. Liens et textes automatiques pour site
    Par midiweb dans le forum Général Conception Web
    Réponses: 1
    Dernier message: 13/06/2007, 14h38
  3. overflow pour un tableau
    Par crampouz dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 08/10/2005, 16h15
  4. Réponses: 2
    Dernier message: 14/03/2005, 19h55
  5. Des classes pour les liens en CSS
    Par Invité dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 08/03/2005, 14h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo