Les mots sont coupés sous ModernBB

[Undra]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://passed-away.forumactif.com

Description du problème

Bonjour,

Comme le screen l'illustre, les mots contenus dans ma cellule sont coupés au lieu de revenir à la ligne. C'est très embêtant !!! Je ne sais pas comment y remédier. Je ne rencontre pas ce pb si je change de version (Phbb2, 3, PunBB, Awesome...)

Je n'ai absolument rien modifié du CSS ou des templates du forum puisque je viens tout juste de le créer, et souhaite rester en version ModernBB...

Merci pour votre aide !

[Undra]

Up svp

[Bryx]

Bonjour

Pouvez-vous testé avec ce code CSS, svp ?

Code:

word-wrap: break-word;

Tenez-moi au courant

[Lixyr]

Bonjour,

Vous avez quelque chose dans votre CSS qui force la césure des mots :

.panel div.mes-txt:last-child, .panel p:last-child {
word-wrap: break-word;
}

.panel div.mes-txt, .panel p {
font-size: 1.3rem;
word-break: break-all;
}

Pour palier ce problème, dans votre CSS, vous pouvez changer cela en rajoutant, pour la classe .contexte, ces lignes :

Code:

    hyphens: auto;
    word-wrap: normal !important;
    word-break: normal !important;

Ça doit donner ça normalement :

Code:

.contexte {
    background: rgba(186,186,202,0.9);
    border-radius: 5px;
    box-shadow: 0 0 5px #555;
    color: #222;
    font-size: 10px;
    height: 350px;
    overflow: hidden;
    padding: 10px;
    text-align: justify;
    transition: .5s all linear;
    width: 300px;
    hyphens: auto;
    word-wrap: normal !important;
    word-break: normal !important;
}

hyphens: auto; permet de rajouter un petit trait d'union quand un mot est coupé en deux. Ce qui est génial avec cette propriété, c'est qu'elle respecte les règles grammaticales françaises. En clair, ça coupe le mot pile au bon endroit. Mais si vous n'en voulez pas vous pouvez l'enlever, les deux autres lignes font le travail.

[Undra]

Bonjour

Pouvez-vous testé avec ce code CSS, svp ?

Code:

word-wrap: break-word;

Tenez-moi au courant

Merci pour votre aide ! Malheureusement, ce code ne change rien sur le forum :/

Bonjour,

Vous avez quelque chose dans votre CSS qui force la césure des mots :

.panel div.mes-txt:last-child, .panel p:last-child {
   word-wrap: break-word;
}

.panel div.mes-txt, .panel p {
   font-size: 1.3rem;
   word-break: break-all;
}

Pour palier ce problème, dans votre CSS, vous pouvez changer cela en rajoutant, pour la classe .contexte, ces lignes :
   

Code:

    hyphens: auto;
    word-wrap: normal !important;
    word-break: normal !important;

Ça doit donner ça normalement :

Code:

.contexte {
    background: rgba(186,186,202,0.9);
    border-radius: 5px;
    box-shadow: 0 0 5px #555;
    color: #222;
    font-size: 10px;
    height: 350px;
    overflow: hidden;
    padding: 10px;
    text-align: justify;
    transition: .5s all linear;
    width: 300px;
    hyphens: auto;
    word-wrap: normal !important;
    word-break: normal !important;
}

hyphens: auto; permet de rajouter un petit trait d'union quand un mot est coupé en deux. Ce qui est génial avec cette propriété, c'est qu'elle respecte les règles grammaticales françaises. En clair, ça coupe le mot pile au bon endroit. Mais si vous n'en voulez pas vous pouvez l'enlever, les deux autres lignes font le travail.

Merci beaucoup, ça fonctionne parfaitement !