En test ici même pour les titres des billets, c’est surtout la propriété text-wrap: balance;
qui l’est :
.post-title {
white-space: unset;
text-wrap: balance;
hyphens: auto;
}
Pour passer de :
Exemple
Administration idéale, suite
À :
Exemple
Administration idéale, suite
NB : Le hyphens: auto;
est nécessaire sinon on obtient ceci avec le text-wrap: balance;
:
Exemple
Administration idéale, suite
Ça m’intéresse de savoir comment ça rend sur vos appareils respectifs !
1 De Cunégonde -
Tu veux qu’on t’envoie des captures d’écran de nos titres ?
2 De Franck -
Pas forcément, juste me dire si ça vous paraît correct (à l’œil) sur vos appareils
3 De Michel Loiseau -
Bonjour, Avec Firefox sur un MacBook Pro 15” et sur un iPhone 5S, la dernière ligne de texte (Ça m’intéresse de savoir comment ça rend sur vos appareils respectifs !) s’affiche sur trois lignes de longueur sensiblement semblables sur le téléphone. Pour le reste, c’est tout pareil sur les deux appareils. Je ne connaissais pas cette règle css. Je n’ai pas de réel avis sur le résultat. Je dirais que dans l’exemple que tu donnes, si cela me semble bon sur le téléphone, c’est moins évident sur l’écran de l’ordinateur portable. Si tu n’avais pas précisé l’utilisation de cette règle, je pense que je n’aurais rien remarqué de spécial.
4 De Franck -
Michel l’expérimentation CSS n’est en place que pour les titres des billets (ou des pages), pas pour le contenu.
5 De Michel Loiseau -
D’accord, j’ai cru que ça avait eu un effet sur le texte du contenu mais c’est juste un effet dû à la taille de l’écran.
6 De Feuille -
Avec Edge (v 112.0) aucune évolution quelque soit la taille de la fenêtre, ça essaie de remplir le plus possible la première ligne.
7 De Franck -
Il est probable qu’Edge ne supporte pas l’attribut
text-wrap: balance;
8 De wwwouaiebe -
Avec Firefox et Edge, cela ne change rien car text-wrap n’est pas supporté. Voir https://caniuse.com/mdn-css_properties_text-wrap
9 De Jean-Christian Paul Denis -
MS Edge Version 113.0.1774.35 : ça n’a rien changé, je vois ton premier exemple.
10 De Franck -
Bah oui, comme disais wwwouaiebe plus haut, ça ne fonctionne pour l’instant que sur Chrome.
11 De Cunégonde -
Sur samsung s22ultra et chrome, je vois bien tous tes exemples
12 De Franck -
Merci Cunégonde