Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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 : par CSS, ou par javascript.


Raccourcissement par un code css

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Insérez ce code dans votre feuille de style personnalisé :
Code:
.postbody a {
  display: inline-block;
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

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

  • 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

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Raccourcir les liens dans les posts" et pour placement "Sur les sujets".

Insérez-y le code suivant :
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))
  })
});

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

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


avatar

Ea
Aidactif
Aidactif

Messages : 23536
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