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 :
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.
|
Accueil
Créer un forum
Raccourcir l'affichage de longs liens
par Ea Mer 17 Oct 2012 - 10:58
