Interprétation des propriétés de saut de ligne forcé CSS : saut de mot et espace blanc

Interprétation des propriétés de saut de ligne forcé CSS : saut de mot et espace blanc, des exemples de code spécifiques sont requis

Dans le développement Web, la méthode de saut de ligne du contenu textuel est un problème très courant et important. Parfois, nous devons forcer le retour à la ligne du texte long pour l'adapter aux besoins de la mise en page ou améliorer la lisibilité. CSS fournit deux propriétés pour contrôler la façon dont le texte est renvoyé à la ligne, à savoir le saut de mot et l'espace blanc. Attribut

1. word-break : L'attribut

word-break spécifie où les sauts de ligne peuvent apparaître. Il a les valeurs suivantes :

• normal (par défaut) : enrouler à l'intérieur des mots ou au niveau des traits d'union. Il s'agit du comportement par défaut du navigateur.
• break-all : brisez les lignes à l'intérieur des mots. Si nécessaire, des tirets séparent les mots.
• garder tout : pas de sauts de ligne, seuls les sauts de ligne sont autorisés aux espaces à mi-largeur ou aux traits d'union. Cette propriété s'applique aux écritures non latines.

Ce qui suit est un exemple de code spécifique :

<style>
  .normal {
    word-break: normal;
  }
  
  .break-all {
    word-break: break-all;
  }
  
  .keep-all {
    word-break: keep-all;
  }
</style>

<div class="normal">This is a long text. This is a long text. This is a long text.</div>
<div class="break-all">This is a long text. This is a long text. This is a long text.</div>
<div class="keep-all">This is a long text. This is a long text. This is a long text.</div>

Dans l'exemple ci-dessus, nous avons défini trois éléments div, à savoir .normal, .break-all et .keep-all. En ajoutant des classes correspondantes à différents éléments div, vous pouvez voir leurs différents comportements lors du packaging. Attribut

2. white-space : L'attribut

white-space est utilisé pour définir comment gérer les caractères d'espacement dans l'élément. Il a les valeurs suivantes :

• normal (valeur par défaut) : La méthode de traitement par défaut, les espaces continus, les tabulations ou les nouvelles lignes seront fusionnés en un seul espace et le texte sera automatiquement renvoyé à la ligne.
• nowrap : aucun saut de ligne, espace consécutif, tabulation ou nouvelle ligne ne sera fusionné en un seul espace.
• pre : conserver le formatage d'origine et les sauts de ligne des caractères d'espacement.
• pre-wrap : préserve la mise en forme originale des caractères d'espacement et permet au texte de s'enrouler automatiquement.
• pré-ligne : préservez le format d'origine des caractères d'espacement, les espaces continus, les tabulations ou les nouvelles lignes seront fusionnés en un seul espace et permettront au texte de s'enrouler automatiquement.

Voici un exemple de code spécifique :

<style>
  .normal {
    white-space: normal;
  }
  
  .nowrap {
    white-space: nowrap;
  }
  
  .pre {
    white-space: pre;
  }
  
  .pre-wrap {
    white-space: pre-wrap;
  }
  
  .pre-line {
    white-space: pre-line;
  }
</style>

<div class="normal">This is a        long text.</div>
<div class="nowrap">This is a        long text.</div>
<div class="pre">This is a        long text.</div>
<div class="pre-wrap">This is a        long text.</div>
<div class="pre-line">This is a        long text.</div>

Dans l'exemple ci-dessus, nous avons défini cinq éléments div, à savoir .normal, .nowrap, .pre, .pre-wrap et .pre-line. En ajoutant des classes correspondantes à différents éléments div, vous pouvez voir leurs différentes performances lors de la gestion des caractères d'espacement et des sauts de ligne.

En utilisant les attributs word-break et white-space, nous pouvons contrôler de manière flexible le retour à la ligne du texte en fonction des besoins réels, améliorant ainsi l'effet de la mise en page et la lisibilité du texte.

Résumé :

Cet article explique les propriétés de saut de mot et d'espace blanc du CSS et donne des exemples de code spécifiques. En maîtrisant l'utilisation de ces deux attributs, nous pouvons mieux contrôler la façon dont le texte est renvoyé dans le développement Web et améliorer l'expérience utilisateur. Différentes valeurs et combinaisons d'attributs peuvent produire différents effets, et les développeurs peuvent choisir la combinaison d'attributs appropriée à utiliser en fonction des besoins réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!