Comment modifier l'habillage de texte par défaut avec HTML et CSS

Contrairement au papier, les pages Web peuvent étendre presque infiniment sur le côté. Même si c'est impressionnant, ce n'est pas quelque chose dont nous avons vraiment besoin en lisant. Les navigateurs enveloppent le texte en fonction de la largeur du conteneur de texte et le largeur de l'écran afin que nous puissions voir tout le texte sans avoir à faire défiler beaucoup (uniquement vers le bas).

Emballage est quelque chose que les navigateurs font en tenant compte de nombreux facteurs, tels que la langue du texte ou le placement de la ponctuation et des espaces - ils ne vous contentez pas d'abaisser ce qui ne rentre pas dans la case définie pour le contenu du texte.

Autre que l’emballage, les navigateurs aussi prendre soin des espaces; ils fusionnent plusieurs espaces consécutifs du code source en un seul espace sur la page rendue et ils enregistrent également les sauts de ligne forcés avant de commencer à travailler sur le wrapping.

Quand changer le retour à la ligne par défaut

C'est génial et très apprécié. Cependant, nous pouvons facilement nous retrouver dans des situations où le comportement du navigateur par défaut n'est pas ce que nous recherchons. Ce peut être un titre qui ne devrait pas être emballé ou un mot dans un paragraphe qui vaut mieux être cassé que de descendre une ligne, laissant un espace vide étrange à la fin de la ligne.

Il peut également arriver que nous venions désespérément besoin de ces espaces conservés dans notre texte, Cependant, le navigateur continue à les combiner en un, ce qui nous oblige à ajouter plusieurs dans le code source.

Les préférences d'emballage peuvent également changer avec la langue et le but du texte. Un article de presse en mandarin et un poème français ne doivent pas nécessairement être emballés exactement de la même manière.

Il existe un bon nombre de propriétés CSS (et d’éléments HTML!) Pouvant contrôler l'emballage et les points d'arrêt et aussi définir le traitement des espaces et des sauts de ligne avant le retour à la ligne.

Opportunités d'emballage douces et pauses douces

Les navigateurs décident où placer un texte débordant en fonction des limites des mots, des traits d'union, des syllabes, des ponctuations, des espaces et plus. Ces endroits sont tous appelés opportunités d'enveloppement souple et lorsque le navigateur casse le texte à un tel endroit, la pause s'appelle un pause douce.

Le moyen le plus simple de forcer une pause supplémentaire peut être fait en utilisant le bon vieux
élément.

Espace blanc

Si vous connaissez le espace blanc Propriété CSS Je parie que vous en êtes venu à le connaître d’abord comme beaucoup d’autres; en cherchant un moyen de empêcher l'emballage du texte. le maintenant valeur de espace blanc fait exactement cela.

Cependant, le espace blanc la propriété ne se limite pas à l’emballage. Tout d’abord, quel est l’espace? C'est un ensemble de caractères d'espace. Chaque espace de l'ensemble varie les uns des autres en longueur, direction, ou les deux.

Un typique caractère d'espacement horizontal unique est ce que nous ajoutons en appuyant sur la touche barre d'espace. La touche de tabulation ajoute également un espace similaire mais avec une plus grande longueur. La touche Entrée ajoute un espace vertical pour commencer une nouvelle ligne, et en HTML ajoute un espace unique incassable aux pages Web. Comme cela, il existe de nombreux types d'espaces qui constituent “les espaces”.

Comme je l'ai mentionné au début, les navigateurs réduire plusieurs espaces (horizontal et vertical) de la source dans un seul espace. Ils aussi considérer ces caractères d'espace pour saisir les opportunités (endroits où un texte peut être mis en forme) lorsque la mise en forme est nécessaire.

Et c’est précisément ces actions du navigateur que nous pouvons contrôler avec espace blanc. Notez que le espace blanc la propriété n'affecte pas tous les types d'espace, juste les plus fréquents tels que les espaces simples horizontaux réguliers, les espaces de tabulation et les sauts de ligne.

Ci-dessous, vous pouvez voir une capture d'écran d'un exemple de texte enveloppé par le navigateur pour tenir dans son conteneur. Le débordement se produit au bas du conteneur et le texte débordé est coloré différemment. Vous remarquerez le effondrement des espaces consécutifs dans le code.

 
 UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. 

 .textContainer width: 500px; hauteur: 320px;  

Après l'application espace blanc: maintenant; règle, l’habillage du texte change de la manière suivante:

 .textContainer / *… * / white-space: nowrap;  

le pré valeur de espace blanc préserve tous les espaces blancs et empêche l'habillage du texte:

 .textContainer / *… * / white-space: pre;  

le préemballage valeur de espace blanc préserve tous les espaces blancs et enveloppe le texte:

 .textContainer / *… * / white-space: pre-wrap;  

Finalement, le pré-ligne valeur de espace blanc préserve les espaces blancs verticaux comme de nouvelles lignes et enveloppe le texte:

 .textContainer / *… * / white-space: pre-line;  

Coupures de mots

Une autre propriété CSS importante à connaître pour contrôler le retour à la ligne est mot-pause. Vous pouvez voir dans toutes les captures d'écran ci-dessus que le navigateur enveloppé le texte avant le mot “Bonjour” du côté droit, au-delà duquel le texte débordé. Le navigateur n'a pas cassé le mot.

Cependant, si vous devoir permettre la rupture de lettres dans un mot afin que le texte semble même sur le côté droit, vous devez utiliser le Tout casser valeur pour le mot-pause propriété:

 .textContainer / *… * / word-break: break-all;  

le mot-pause la propriété a une troisième valeur à part Tout casser et Ordinaire (appartenant au saut de ligne par défaut). le Garde tout valeur ne permet pas la rupture de mots.

Vous pourriez ne pas être en mesure de voir l'effet de Garde tout en anglais. Mais dans les langues où les lettres d’un mot sont unités significatives sur leurs propres, le navigateur peut casser les mots lors de l’emballage, ce qui peut être évité en utilisant Garde tout.

Par exemple, le lettres en mots coréens, initialement cassé pour l'emballage, sont maintenus ensemble quand le espace blanc: garder tout; la règle est spécifiée.

UNE¬Â ?? ¸UNEªUNE³Â ?? à «Â¥UNE¼ Ã-Â-Â¥Ã-?? ?? ?? à «?? ?? ?? Ã- ?? ?? ??, ì ??  à «Â ??  ?? ??¬UNE½Â ?? à «Â ??  ?? ë ¡UNE?? Ã- ?? ?? ?? ì ?? Â-ì ??  ?? ì ?? ¤. UNE¬Â «10      ?? ?? UNE¬Â ??  à «Â ??  ?? ??¬UNE½"??" UNEªUNEµÂ-ì ?? Ã- ?? ?? ?? ì ??  ?? ê °  ?? 1997… «?? 3ì ??  ?? 10ì ?? ¼à «Â¶Â ?? Ã- ??  ° 12ì ?? ¼UNEªUNE¹Â ?? ìUNE§UNE?? à «Â ?? Â… ì ?? ¼UNE¬Â ??  ?? à «Â§Â ?? ì ?? ¸UNE¬UNE¦Â ?? ìÂ- ?? ì ??  ?? UNE¬Â-´à «Â¦UNE½Ã ?? ?? ?? ?? à «Â ?? ¤. UNE¬UNE§Â ?? êUNE¸UNE?? à «Â ??  ± ë ¡ ?? Ã-?? ?? ?? ??¬Â ?? Â-ì ??  ?? ì ?? ¤. UNE¬Â ?? ´ Ã- ?? ?? ?? ì ??  ?? ìÂ- ?? ì ??  ??  «Â ??  ?? UNE¬Â-Â… êUNE³UNE?? UNE¬Â ??  «Â °  ?? ì ??  ?? UNE¬Â ?? à «Â¬UNE¸UNEªÂ °  ?? à «Â ?? ¤UNE¬Â ?? ´ Ã- ?? ¨UNEªÂ »Â ?? à «ÂªUNE¨UNE¬Â-¬ à «Â ?? ¤UNE¬Â ??  ?? êUNE³UNE¼ UNEªÂ °  ?? ì ??  ?? à «Â¶Â ?? ì ?? ¼à «Â¥UNE¼ à «Â ?? ¤à «Â £ ¹à ?? ?? ?? ?? à «Â ?? ¤.

 .textContainer / *… * / word-break: keep-all;  

Cette propriété peut supporter une autre valeur appelée mot de rupture A l'avenir. Vous verrez comment mot de rupture travaille plus tard, dans le “Débordement” section de cet article.

Opportunités de mot break

Les développeurs peuvent aussi ajouter des possibilités d'habillage dans les mots, en utilisant le Élément HTML. Si un navigateur doit envelopper une chaîne de texte, il considérera l'endroit où est présent pour une opportunité d'emballage.

 
 UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Hello â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. UNE¢Â ??  ?? Bonjour. 
 

 .textContainer / *… * / white-space: pre-wrap;  

Sans pour autant , la totalité “Bonjour” mot aurait été rendu dans une nouvelle ligne. En ajoutant au code HTML, nous avons informé le navigateur que il n'y a pas de mal à casser le mot à ce moment-là pour envelopper, en cas de besoin.

Hyphens

le traits d'union La propriété CSS est une autre façon de contrôler les pauses entre les lettres en un mot. Nous avons un article séparé sur la césure CSS si cela vous intéresse. En bref, la propriété vous permet de créer des opportunités d'habillage par césure.

Ses auto valeur invite le navigateur à césure automatique et casse les mots si nécessaire lors de l'emballage. le Manuel valeur oblige les navigateurs à encapsulez (si nécessaire) les possibilités de césure ajoutées par nous, comme le trait d'union (‐) ou ­ (trait d'union doux). Si aucun a été donné comme valeur il y aurait pas d'emballage près des traits d'union.

 
 bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse 
 

 .textContainer / *… * / -webkit-hyphens: auto; -ms-traits d'union: auto; traits d'union: auto;  

Débordement

le débordement Propriété CSS contrôle si un navigateur peut casser des mots (ou espaces préservés, dont le soutien pourrait se produire dans un proche avenir) en débordement. Quand le mot de rupture la valeur est donnée pour débordement, le mot sera brisé au cas où on ne trouve pas d'autres opportunités de soft wrapp dans la ligne.

Notez que débordement est également connu comme mot enveloppé (ce sont des alias).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / *… * / overflow-wrap: break-word;  

Sans espace entre les lettres du code HTML ci-dessus (c’est-à-dire sans possibilité d’emballage), le texte n’était pas encapsulé au début et a été préservé comme un seul mot.

Cependant, lorsque l’autorisation a été donnée d’envelopper le texte en cassant les mots (c.-à-d. Le mot de rupture la valeur a été donnée à débordement), la l'emballage est arrivé en brisant la chaîne entière partout où c'était nécessaire.