Une brève discussion sur les espaces et les lignes vides dans le code HTML

Tous les espaces consécutifs ou lignes vides (nouvelles lignes) dans le code HTML seront affichés comme un seul espace.

Exemple 1 : (Espaces continus dans le contenu du texte)

Code

<p>这段文本中，输入连续的空格          大概输入了十个。</p>

Effet d'affichage : Il y a un espace entre "carré" et "grand". espace.

这段文本中，输入连续的空格 大概输入了十个。

Exemple 2 : (Espaces continus entre les codes)

Code

<span>span是一个行内标签</span>               <span>和前面的span元素之间隔了很多个空格</span>

Effet d'affichage : Espaces continus entre deux éléments de travée, affichage Il apparaît comme le espace entre "ticket" et "et", il n'y a qu'un seul espace.

span是一个行内标签 和前面的span元素之间隔了很多个空格

Les deux exemples ci-dessus prouvent que les espaces continus dans le code HTML seront affichés comme un seul espace lors de l'affichage, et les espaces supplémentaires restants seront supprimés ou ignorés.

Le texte du paragraphe fait en fait partie du code HTML, mais il se trouve à l'intérieur de la balise p et l'espace dans l'exemple 2 se trouve entre les deux balises span.

Comprenez les espaces, regardez maintenant les lignes vides, la même chose

Exemple 3 : (lignes vides dans le contenu du texte)

Code

<p>这段文本中，输入连续的空行  
  
  
  
  
  
大概输入了五行。</p>

Effet d'affichage : Comme nous pouvons le constater, les cinq lignes vides du code texte ne sont affichées que sous forme d'espace.

这段文本中，输入连续的空行 大概输入了五行。

Exemple 4 : (lignes vierges entre éléments/balises), remplacez simplement les espaces de l'exemple 2 par des lignes vides. L'effet d'affichage est le même que dans l'exemple 2, les lignes vides multilignes ne seront que des lignes vides. apparaissent comme un seul espace.

<span>span是一个行内标签</span>  
  
  
  
  
  
<span>和前面的span元素之间隔了很多空行</span>

span是一个行内标签 和前面的span元素之间隔了很多空行

Preuve : Tous les espaces consécutifs ou lignes vides (sauts de ligne) dans le code HTML seront affichés comme un seul espace.

Dans ce cas, que devons-nous faire si nous voulons étendre l'espacement entre deux caractères afin que le résultat des espaces continus ou des lignes vides dans le code soit également des espaces continus ou des lignes vides ? C'est en fait très simple.

Méthode 1 : On peut utiliser la balise pré-formatée

, qu'il s'agisse d'un espace ou d'une ligne vide. <pre class="brush:html;toolbar:false"><pre class="brush:php;toolbar:false">  
这是  
预格式文本。  
它保留了      空格  
和换行。  

Effet d'affichage

这是  
预格式文本。  
它保留了      空格  
和换行。

Méthode 2 : Nous pouvons utiliser le caractère d'entité spatiale à la place ; Espace, remplacez les lignes vides par des balises de nouvelle ligne
. Bien que cette méthode puisse obtenir l'effet d'affichage souhaité, elle n'est pas la plus conviviale pour les moteurs de recherche car
Il est donc recommandé de l’utiliser le moins possible. Notez également que   doit être en minuscules et que le point-virgule à la fin ne peut pas être omis.

Troisième méthode : (convient aux espaces) Utiliser des espaces pleine chasse

Les espaces pleine chasse sont interprétés comme des caractères chinois, ils ne seront donc pas interprétés comme des délimiteurs HTML . Vous pouvez suivre le nombre réel d'espaces affichés.

Question : Comment utiliser la méthode de saisie pleine largeur ?

Prenons la méthode de saisie Sogou comme exemple. Nous utilisons généralement une saisie demi-largeur. S'il y a un symbole de lune dans la barre d'état, cela signifie que la saisie demi-largeur est utilisée. , cela signifie qu'il utilise une entrée demi-largeur. Il s'agit d'une entrée pleine largeur. Vous pouvez basculer entre pleine largeur et demi-largeur en cliquant sur l'icône ou en appuyant sur la touche de raccourci Maj Espace.

Entrée demi-angle (Lune) Entrée plein angle (Soleil)

Méthode 4 : Utilisez les styles CSS pour contrôler les attributs de l'intervalle de mots dans le style CSS. Modifiez l'espacement standard entre les caractères (mots). Nous savons que deux mots en anglais sont séparés par un espace, nous pouvons donc visuellement penser que l'espacement des mots modifie (allonge ou raccourcit) la largeur de l'espace entre les mots.

Méthode 5 : Utiliser l'attribut white-space dans le style CSS Cet attribut déclare comment gérer les caractères d'espacement dans l'élément.

white-space:normal; est normal, tout comme si vous ne le définissiez pas, un seul espace sera affiché pour les espaces consécutifs et les lignes vides.

white-space:nowrap; Que signifie « ne pas envelopper » ? Dans des circonstances normales, lorsque notre texte dépasse le champ de texte, le texte sera automatiquement renvoyé à la ligne. Ce paramètre signifie qu'il ne sera pas automatiquement renvoyé à la ligne, mais qu'il sera renvoyé à la ligne lorsqu'il rencontrera la balise de saut de ligne
white-space:pre; Identique à la méthode 1, affiche et affiche le texte tel quel. Lorsque le texte dépasse la zone de texte, il ne revient pas à la ligne et génère des barres de défilement.

white-space:pre-wrap; Conserve les espaces et les lignes vides, mais lorsque le texte dépasse le champ de texte, il sera automatiquement renvoyé à la ligne.

white-space:pre-line; Les espaces continus seront affichés comme un seul espace, mais les lignes vides continues seront conservées.

Ce qui précède est la brève discussion sur les espaces et les lignes vides dans le code HTML présentée par l'éditeur. J'espère que vous soutiendrez le site Web PHP chinois ~

En savoir plus sur la brève discussion sur les espaces. et les lignes vides dans le code HTML Pour les articles liés aux espaces et aux lignes vides, veuillez faire attention au site Web PHP chinois !