Raccourcir l'affichage de longs liens

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.