Titres longs qui débordent dans l'espace privé #5284

Closed
opened 1 month ago by b_b · 10 comments
b_b commented 1 month ago
Owner

Un titre d'article long sans espace provoque un débordement pas très classé, exemple ici https://www.spip.net/ecrire/?exec=article&id_article=6634

image

Un titre d'article long sans espace provoque un débordement pas très classé, exemple ici https://www.spip.net/ecrire/?exec=article&id_article=6634 ![image](/attachments/add36dab-3692-4894-ba62-bbbdcf559a2d)
b_b added this to the 4.1 milestone 1 month ago
b_b added the
espace privé
css
bug
labels 1 month ago
Owner

un word-break devrait resoudre le problème.

je fais une PR ?

#contenu .fiche_objet > .box__header h1,#contenu .fiche_objet > .box__header .surtitre,#contenu .fiche_objet > .box__header .soustitre{
	color:var(--spip-color-theme-dark);
	font-weight:400;
	word-break: break-word;
}
un word-break devrait resoudre le problème. je fais une PR ? ``` #contenu .fiche_objet > .box__header h1,#contenu .fiche_objet > .box__header .surtitre,#contenu .fiche_objet > .box__header .soustitre{ color:var(--spip-color-theme-dark); font-weight:400; word-break: break-word; } ```
b_b commented 1 month ago
Poster
Owner

C'est mieux avec le word break, mais il reste le soucis de décalage du titre qui passe sous le bouton "Modifier cet article".

C'est mieux avec le word break, mais il reste le soucis de décalage du titre qui passe sous le bouton "Modifier cet article".
Owner

Sous chrome ca semble déjà bon

pour firefox et autre break-all marche mieux que break-word

Sous chrome ca semble déjà bon pour firefox et autre break-all marche mieux que break-word
b_b commented 1 month ago
Poster
Owner

+1 pour le break-all, paye ta PR mignon :)

+1 pour le break-all, paye ta PR mignon :)
Owner

C'est pas si simple que cela
Le break-all coupe tout: donc on se retrouve avec des mots coupés n'importe comment sur les titres longs (voir la capture)

J'ai donc opté pour une autre solution 809d681f77
Il y a donc un

  • un overflow-wrap: break-word; pour couper au mot près
  • max-width: calc(100% - 75px); pour éviter le retour à la ligne ...

cela ne fait très propre @tcharlss as-tu une meilleure suggestion ?

C'est pas si simple que cela Le break-all coupe tout: donc on se retrouve avec des mots coupés n'importe comment sur les titres longs (voir la capture) J'ai donc opté pour une autre solution https://git.spip.net/spip/spip/commit/809d681f77dc4ff95caeabdc4a4c9312dd7d1c2c Il y a donc un - `un overflow-wrap: break-word;` pour couper au mot près - `max-width: calc(100% - 75px);` pour éviter le retour à la ligne ... cela ne fait très propre @tcharlss as-tu une meilleure suggestion ?

Ça me parait acceptable vu l'immense rareté des cas (un unique mot sans aucun espace ni aucun caractère qui coupe genre "/" etc).

Ça me parait acceptable vu l'immense rareté des cas (un unique mot sans aucun espace ni aucun caractère qui coupe genre "/" etc).
Owner

A terme, il faudrait que le bouton soit placé avec un flex et non un float

Sinon on a aussi des effets de bord comme par exemple dans le cas (capture d'un SPIP 4.1 de base)

A terme, il faudrait que le bouton soit placé avec un `flex `et non un `float` Sinon on a aussi des effets de bord comme par exemple dans le cas (capture d'un SPIP 4.1 de base)

Bé ton max-width revient au même qu'avec un flex où le h1 va jamais aller sous le bouton même dessous non ? Ça fait du côte-à-côte plutôt que du float en encart

Bé ton max-width revient au même qu'avec un flex où le h1 va jamais aller sous le bouton même dessous non ? Ça fait du côte-à-côte plutôt que du float en encart
Owner

Oui c'est quasi pareil sauf qu'on perd de l'espace à droite dans les cas où il n'y a pas d'éléments flottants

Bon c'est sans doute satisfaisant pour l'instant

Oui c'est quasi pareil sauf qu'on perd de l'espace à droite dans les cas où il n'y a pas d'éléments flottants Bon c'est sans doute satisfaisant pour l'instant
Au cas où ça puisse aider : https://codersblock.com/blog/deep-dive-into-text-wrapping-and-word-breaking/
b_b closed this issue 1 week ago
Sign in to join this conversation.
No Milestone
No project
No Assignees
4 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.