Raccourcir l'affichage de longs liens

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Raccourcir l'affichage de longs liens

Message par Ea le Mer 17 Oct 2012 - 10:58

Raccourcir l'affichage
de longs liens


En mettant un lien dans un message sans avoir spécifié de texte à cliquer ( donc sans avoir mis [url=http://adresse]texte à cliquer[/url] ), il est lui-même mis comme texte à cliquer.

Donc si je mets :

Code:
https://www.google.com/search?q=vie+OR+mort+OR+france+OR+usa+OR+god+OR+world+OR+code+OR+email&oq=vie+OR+mort+OR+france+OR+usa+OR+god+OR+world+OR+code+OR+email&sugexp=chrome,mod=4&sourceid=chrome&ie=UTF-8#hl=en&sclient=psy-ab&q=vie+OR+mort+OR+france+OR+usa+OR+god+OR+world+OR+code+OR+email+OR+yeah&oq=vie+OR+mort+OR+france+OR+usa+OR+god+OR+world+OR+code+OR+email+OR+yeah&gs_l=serp.3...1750.3265.0.3417.8.4.0.0.0.0.1018.1989.4-1j1j0j1.3.0.les%3B..0.0...1c.1.Tn1r0r3hGgI&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.&fp=2a08806e7f39e216&biw=1024&bih=538
J'ai à l'affichage :

https://www.google.com/search?q=vie+OR+mort+OR+france+OR+usa+OR+god+OR+world+OR+code+OR+email&oq=vie+OR+mort+OR+france+OR+usa+OR+god+OR+world+OR+code+OR+email&sugexp=chrome,mod=4&sourceid=chrome&ie=UTF-8#hl=en&sclient=psy-ab&q=vie+OR+mort+OR+france+OR+usa+OR+god+OR+world+OR+code+OR+email+OR+yeah&oq=vie+OR+mort+OR+france+OR+usa+OR+god+OR+world+OR+code+OR+email+OR+yeah&gs_l=serp.3...1750.3265.0.3417.8.4.0.0.0.0.1018.1989.4-1j1j0j1.3.0.les%3B..0.0...1c.1.Tn1r0r3hGgI&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.&fp=2a08806e7f39e216&biw=1024&bih=538

Cette astuce permet de raccourcir un long lien comme cela par ceci :

https://www.google.com/search?q=vie+OR+…24&bih=538

Pour ce faire, on propose deux solutions :



Raccourcissement par un code css

Par css, le raccourcissement s'appliquera à tout les liens et il y aura juste remplaçant la fin du lien.

Il faut ajouter dans le code css ( PA > Affichage > Couleurs > Feuille de style ) ceci :

Code:
.postbody a {
  display: inline-block;
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
  • display: inline-block; => permet de changer le type d'affichage de l'élément en inline-block, qui est un mode d'affichage permettant d'avoir une largeur maximale.
  • max-width: 300px; => est la largeur maximum d'un lien ( peut être changé pour une autre largeur )
  • overflow: hidden; => spécifie de cacher ce qui dépasse de la largeur maximum
  • white-space: nowrap; => spécifie que si quelque chose est trop long, il ne faut pas le couper en 2 et revenir à la ligne
  • text-overflow: ellipsis; => spécifie que si le texte est trop long, il faut le couper et le terminer par des points de suspension
  • vertical-align: bottom; => place le texte à la même hauteur que ce qui n'est pas un lien


Raccourcissement par un code javascript

Par javascript, le remplacement ne s'appliquera qu'aux liens sans texte à cliquer spécifié, et remplacera le milieu du lien.

Il vous faut ajouter sur les sujets ( voir page html de liste de script ) ce script :

Code:
$(function(){
  $(".postbody a").each(function() {
    1 == this.childNodes.length && 3 == this.childNodes[0].nodeType && (this.href == this.childNodes[0].nodeValue && 55 < this.childNodes[0].nodeValue.length) && (this.childNodes[0].nodeValue = this.childNodes[0].nodeValue.substr(0, 39) + "…" + this.childNodes[0].nodeValue.substr(-10))
  })
});
Vous pouvez changer les chiffres :

  • 55 => longueur que le lien doit dépasser pour être raccourci
  • 39 => nombre de caractère à partir du début à mettre avant le
  • 10 => nombre de caractère à partir de la fin à mettre après le



Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum