Lors de l’optimisation d’un site sous WordPress, il peut arriver que les mots soient coupés de manière inesthétique, notamment sur mobile. La césure automatique peut nuire à la lisibilité et donner un rendu peu harmonieux. Voici comment éviter ces problèmes et améliorer l’affichage du texte sur toutes les tailles d’écran.

Le problème de la césure automatique des mots

Par défaut, certains navigateurs et thèmes WordPress appliquent une césure automatique aux mots longs afin d’éviter qu’ils ne débordent de leur conteneur. Ce comportement peut être utile dans certains cas, mais il peut aussi poser problème en créant des coupures étranges et en rendant le texte difficile à lire.

Dans certains cas, l’espacement des lettres et la mise en forme du texte provoquent des retours à la ligne inégaux, notamment sur mobile.

Désactiver la césure et éviter les débordements

1. Solution CSS globale pour empêcher la césure

Pour désactiver la césure des mots sur l’ensemble du site sans affecter la mise en page, il est possible d’ajouter ce code CSS dans le fichier de personnalisation de WordPress :

body, p, span, div, h1, h2, h3, h4, h5, h6, a {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    white-space: normal !important;
}

Ce code permet :

• De désactiver la césure (hyphens: none;),
• D’assurer que les mots trop longs passent à la ligne (overflow-wrap: break-word;),
• D’éviter que le texte ne déborde du conteneur.

2. Ajuster l’affichage sur mobile

Si certains textes ont encore un affichage irrégulier sur mobile, il est possible d’ajuster la taille du texte pour éviter des retours à la ligne inesthétiques :

@media screen and (max-width: 768px) {
    h1, h2, h3 {
        font-size: 5vw !important;
        line-height: 1.2 !important;
    }

    p {
        font-size: 4vw !important;
    }
}

Cette règle ajuste la taille du texte en fonction de la largeur de l’écran pour un rendu plus harmonieux.

Réduction de l’espacement entre les lettres

Dans certains cas, l’espacement des lettres peut être excessif et donner une apparence trop aérée au texte. Pour réduire cet espacement et améliorer la lisibilité, on peut appliquer ce CSS :

.et_pb_text {
    letter-spacing: 0.01em !important;
}

Ce réglage permet un affichage plus compact du texte, évitant ainsi des retours à la ligne inutiles.

Ces solutions ont été testées avec succès sur différents sites WordPress, y compris ceux utilisant Divi, confirmant leur compatibilité avec ce constructeur de pages.

Conclusion

En combinant ces ajustements CSS, il est possible d’empêcher la césure automatique des mots tout en maintenant une bonne lisibilité sur toutes les tailles d’écran.

Si vous avez besoin d’aide pour affiner l’affichage du texte sur votre site WordPress, n’hésitez pas à nous contacter pour une assistance personnalisée.