La césure du texte

**abc.xyz** · 08/07/2017, 09h47

Bonjour,
afin d'éviter que les mots trop longs de mes textes pour le container soient inscrits à la ligne suivante laissant ainsi un gros espace vide à la ligne au dessus, j'ai utilisé la propriété word break, mais je me retrouve avec des : inscrits au début d'une ligne etc..donc c'est choquant pour le lecteur, comment se résoud ce pb de texte sur les sites web?

merci

**danielhagnoul** · 08/07/2017, 11h08

Je ne connais pas d'autre méthode que l'inclusion d'un caractère insécable :  

Exemple :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
p {
  width: 18rem;
  overflow-wrap: break-word;
}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<p>
  Bonjour, afin d'éviter&nbsp;: que les mots trop longs de&nbsp;: mes textes pour le container soient&nbsp;: inscrits à la ligne suivante laissant&nbsp;:
  ainsi un gros espace&nbsp;: vide à la ligne au dessus, j'ai utilisé la propriété&nbsp;: word break, mais je me retrouve avec des&nbsp;: inscrits
  au début d'une ligne&nbsp;: etc.. donc c'est choquant pour&nbsp;: le lecteur, comment se résoud ce&nbsp;: pb de texte sur les sites web ?
</p>

Envoyé par https://developer.mozilla.org/fr/docs/Web/CSS/overflow-wrap

La propriété overflow-wrap est utilisée pour définir si le navigateur peut ou non faire la césure à l'intérieur d'un mot pour éviter le dépassement d'une chaîne qui serait trop longue afin qu'elle ne dépasse pas de la boîte.

Envoyé par https://developer.mozilla.org/fr/docs/Web/CSS/word-break

La propriété word-break est utilisée pour définir la façon dont la césure s'applique pour les passages à la ligne. Contrairement à overflow-wrap, word-break introduire une césure à l'endroit exact où le texte dépasserait du conteneur.

**abc.xyz** · 08/07/2017, 14h36

bonjour,

1-je ne comprends pas bien ce que tu m'expliques, tu es en train de me dire que positionner des &nbsp là où tu les mets empêche de se retrouver avec des : au début d'une ligne?

2-le texte est très important dans les sites web, il se trouve que avec la propriété word break dont j'ai parlé il n' y a effectivement plus d'espace à la fin d'une ligne (sans word break il y a cet espace car un mot lorsqu'il est trop long est est renvoyé en début de ligne suivante), cependant avec cette propriété on se retrouve avec des textes coupés n'importe où dans le mot et donc avec éventuellement la dernière lettre d'un mot renvoyé en début de ligne suivante c'est pas chic.
Comment font les sites importants pour gérer ces problèmes d'affichage de texte?, en effet sauf erreur de ma part, dans ces sites avec beaucoup de contenu, il n' y a jamais d'espace inesthétique pas plus que de dernière lettre d'un mot en début de ligne suivante.

merci et bonne journée

**abc.xyz** · 08/07/2017, 14h50

je viens d'aller voir du contenu dynamique posté sur facebook, et bien j'ai constaté que ce contenu est avec des espaces importants en fin de ligne et le mot trop long est renvoyé à la ligne suivante.

Invité · 08/07/2017, 15h10

Bonjour,

Césure (typographie)

(extrait)

Cette coupure obéit à des règles bien précises qui varient d'une langue à l'autre.
[...]
Règles linguistiques
La séquence de césure s'effectue selon le découpage syllabique, en essayant si possible de couper entre préfixes et radicaux.

CSS - word-break

break-all
La césure peut être insérée après n'importe quel caractère

Les règles ne sont pas les même.

Voir plutôt :

CSS - overflow-wrap

La propriété overflow-wrap est utilisée pour définir si le navigateur peut ou non faire la césure à l'intérieur d'un mot pour éviter le dépassement d'une chaîne qui serait trop longue afin qu'elle ne dépasse pas de la boîte.

CSS - hyphens

La propriété hyphens indique au navigateur comment gérer les traits d'union lors des sauts de ligne. Grâce à elle, on peut empêcher l'utilisation des traits d'union en fin de ligne, contrôler quand ils sont ajoutés ou laisser le navigateur décider.

Ex. :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<html lang="fr">
 
  <p class="cesure-auto">Le mot le plus long de la langue française, si on en croit les dictionnaires usuels, est anticonstitutionnellement, avec 25 lettres.</p>
 
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
p.cesure-auto {
  width: 80px;
  border: 1px dashed #ccc;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  /*word-wrap: break-word;*/
}