Quand une ligne ne se casse pas

Online Coding Courses for Kids

Nous nous attendons à ce qu’une ligne se casse lorsque le texte sur cette ligne atteint les limites de la zone parent. Nous le voyons à chaque fois que nous créons un paragraphe, comme celui-ci. Lorsque la zone parent n’a pas assez de place pour le mot suivant dans une ligne, elle le casse et descend à la ligne suivante et répète ce processus.

Eh bien, c’est ainsi que cela fonctionne lorsque les mots sont séparés par des espaces ou d’autres espaces. En ce qui concerne CSS, il y a cinq (!) Propriétés qui peuvent éventuellement affecter comment et quand une ligne se brise. Mais ne rentrons pas dans tout ça. Examinons plutôt une situation où il semble qu’une ligne va se casser, mais ce n’est pas une excuse pour apprendre un petit quelque chose sur la rupture de ligne.

Que se passe-t-il dans une situation où le navigateur n’a aucun moyen de savoir quand il est permis de faire une pause?

Mettons-nous dans une mauvaise situation avec une “liste de balises” et sortons-en. Voici notre balisage:

     
  • PHP
  •  
  • JavaScript
  •  
  • Rust
  •  

Ensuite, nous appliquerons le CSS qui remplace le style de liste par défaut de son orientation verticale par défaut à l’horizontale en faisant afficher les éléments de la liste en ligne.

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}


li {
  display: inline;
  padding-right: 5px;
}

La liste ressemble exactement à ce que nous voulons. J’ai ajouté un peu d’espace entre un élément de la liste et un autre, donc il n’a pas l’air trop de monde.

Introduisons maintenant un élément wrapper dans le mix. C’est essentiellement une divergence autour de la liste non ordonnée. Nous pouvons lui donner une classe, disons, .tags.

 
       
  • PHP
  •    
  • JavaScript
  •    
  • Rust
  •  

Disons que nous voulons donner au wrapper une largeur fixe de 200 pixels. C’est là que nous devrions nous attendre à voir des sauts de ligne se produire alors que la liste non ordonnée se heurte aux limites du wrapper.

.tags {
  width: 200px;
}

Voici la partie intéressante. De nombreuses personnes utilisent des minificateurs dans leur processus de génération pour réduire la taille des fichiers en se débarrassant des valeurs inutiles. Certaines de ces valeurs sont des espaces blancs, qui incluent des espaces, des tabulations et des sauts de ligne (tels que le retour chariot et le saut de ligne) qui sont utilisés à des fins de formatage mais considérés par les miniformes comme non pertinents pour le résultat final.

Si nous «minimisons» notre code HTML en supprimant de nouvelles lignes, voici ce que nous obtenons:

  • PHP
  • JavaScript
  • Rust

UH OH. Comme vous pouvez le voir, la liste ne se rompt plus à la limite de 200 pixels. Pourquoi? Qu’est-ce qui est différent maintenant? Personnellement, je pensais que HTML ne se souciait pas des espaces blancs. En quoi la version minifiée est-elle si différente du balisage d’origine?

Le navigateur Est-ce que se soucient réellement des espaces blancs… mais seulement quelquefois. Et cela se trouve justement être l’un de ces cas. Lorsque la page est analysée, l’analyseur voit cette liste comme un mot long car, de son point de vue, il n’y a pas de caractères qui différencient les uns des autres.

On pourrait penser que le rembourrage affecte les choses. Mais si nous supprimons le rembourrage de nos éléments de liste, nous obtenons toujours le même résultat … uniquement sans espacement entre les éléments.

Le navigateur voit la liste entière comme un seul mot.

Nous pouvons obtenir des sauts de ligne naturels à partir de caractères spéciaux

Outre les espaces, à l’exclusion des espaces insécables ( ;), il existe d’autres caractères qui forceront un saut de ligne, notamment:

  • Après hypen (‐)
  • Après un tiret ()
  • Avant et après le tiret ()
  • Après le point d’interrogation (?)
  • Espace blanc de largeur nulle (U+200B ou )

Ces sauts de ligne se produisent au moment du rendu, ce qui signifie que le navigateur considère toujours cela comme un long mot. L’ajout d’un nouvel élément de liste à la liste de balises avec l’un de ces caractères forcera un saut de ligne. Ajoutons «Objective-C» à la liste. Son nom contient un trait d’union, que nous pouvons utiliser pour voir comment cela affecte les choses.

Pour une meilleure lisibilité, le code du code aura une indentation et une nouvelle ligne.

 
       
  • PHP
  •    
  • JavaScript
  •    
  • Rust
  •    
  • Objective-C
  •  

C’est bon. Examinons trois solutions à notre liste sans rupture dans ce sens.

Solution 1: ajoutez l’un des caractères de rupture

Nous pouvons continuer à forcer les sauts de ligne avec ces personnages cassants comme nous venons de le faire. Mais rappelez-vous, si vous utilisez un minificateur, l’ajout d’espaces dans ou après la balise de fermeture ne garantit pas qu’il ne sera pas supprimé, car tous les minificateurs ne fonctionnent pas de la même manière.

 
       
  • PHP
  •    
  • JavaScript
  •    
  • Rust
  •    
  • Objective-C
  •  

Solution 2: utiliser des pseudo-éléments

Le caractère de rupture peut également être ajouté à l’aide du ::before et ::after pseudo-éléments en CSS. Ce qui rend cette solution efficace, c’est qu’elle n’est pas affectée par un minificateur HTML car l’espace est ajouté lorsque le CSS est appliqué.

Mais avant de poursuivre, parlons un instant de l’effondrement des espaces blancs.

Le navigateur réduit les espaces avant et après un caractère qui force un saut de ligne à l’intérieur des éléments en ligne. Dans cet esprit, il y a une petite astuce à utiliser ::after et la propriété de contenu avec des espaces blancs et display: inline-block. L’élément inline-block ajoute un caractère de rupture à la fin du texte. Ensuite, l’espace de propriété de contenu vient après le caractère de rupture créé par l’élément inline-block, ce qui entraîne la suppression de l’espace au moment du rendu. Autrement dit, sauf si la propriété d’espace blanc est définie sur pre.

Solution 3: utilisez plutôt le bloc en ligne

Peut-être que vous avez déjà rencontré un combat avec de l’espace entre les éléments de bloc en ligne dans CSS. Nous pouvons utiliser la valeur inline-block sur la propriété display pour forcer un saut de ligne car l’élément inline-block possède déjà l’espace supplémentaire dont nous avons besoin. Cela fonctionne de manière similaire à l’ajout d’un caractère d’espace de largeur nulle, mais les éléments de la liste n’auront aucune séparation visuelle.

Solution 4: utilisez flex ou inline-flex

Une autre solution consiste à définir la liste non ordonnée comme un conteneur flexible, ce qui nous permet d’utiliser flex-flow pour définir la direction de la liste et pour vous assurer qu’elle comporte plusieurs lignes si nécessaire.

Nous pouvons également display: inline-flex au lieu de inline-block Solution. L’idée ici est que l’ensemble du conteneur flexible s’affiche en ligne.


Nous avons donc commencé ce post avec une situation qui pourrait survenir lors de l’utilisation d’un minifier. Cela dit, les minificateurs – et de nombreuses bibliothèques d’ailleurs – sont intelligents et tenteront d’empêcher ce problème de rupture de ligne de se produire.

Bien sûr, ce n’est pas une situation extrêmement courante à se heurter. C’est vraiment une de ces choses qui peuvent passer sous le radar si nous n’y prêtons pas attention, mais si cela se produit, au moins nous savons qu’il existe des moyens de contourner ce problème.

Close Menu