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 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=https://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.

Solution par CSS


Pour les versions PhpBB2, PhpBB3, PunBB, Invision et ModernBB


Panneau d'administration  Affichage  Images et Couleurs - couleurs (Onglet 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.


N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Pour la version AwesomeBB


Panneau d'administration  Affichage  Images et Couleurs - couleurs (Onglet Feuille de style CSS)

Insérez ce code dans votre feuille de style personnalisé :

Code:
.post-body 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.


N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Solution par Javascript


Pour les versions PhpBB2, PhpBB3, PunBB, Invision et ModernBB


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

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Raccourcir les liens dans les messages" et pour placement "Sur les sujets" (plus d'informations sur la gestion des scripts).

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 .


N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Pour la version AwesomeBB


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

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Raccourcir les liens dans les messages" et pour placement "Sur les sujets" (plus d'informations sur la gestion des scripts).

Insérez-y le code suivant :

Code:
$(function(){
  $(".post-body 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 .


N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Ea

Ea
Aidactif
Aidactif

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

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

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

- Sujets similaires

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