Comment conserver les espaces dans le texte en HTML

En HTML, vous pouvez utiliser l'attribut white-space pour conserver les espaces dans le texte. Il vous suffit de définir le style "white-space:pre|pre-line" dans l'élément. L'attribut white-space déclare comment gérer les caractères d'espacement dans les éléments pendant le processus de mise en page.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Règles pour les espaces en HTML

Plusieurs espaces dans le contenu en HTML sont généralement considérés comme un seul et les espaces consécutifs sont automatiquement fusionnés. Dans le même temps, les espaces avant et après le contenu seront également effacés, comme suit :

<p> fly63   com </p>　

L'effet d'affichage est :

fly63 com　

Remarque : ce mécanisme du navigateur est également applicable à autre que la barre d'espace ordinaire. Y compris les caractères de tabulation (t) et les caractères de nouvelle ligne (r et n), les sauts de ligne peuvent être exprimés explicitement en utilisant la balise
les espaces dans un élément sont gérés.

Cet attribut déclare comment gérer les caractères d'espacement dans les éléments pendant le processus de mise en page. Les valeurs pre-wrap et pre-line sont nouvelles dans CSS 2.1.

1. En CSS, lorsque la valeur de l'attribut white-space est pre, il sera traité de la même manière que la balise

 Le navigateur conservera les espaces et les sauts de ligne dans le texte, par exemple : </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><p style="white-space:pre"> fly63  com <p>

Copier après la connexion

L'effet d'affichage est : ' fly63 com '

2 Lorsque l'attribut d'espace blanc de css est pré. -line, cela signifie que les sauts de ligne sont conservés. À l'exception du caractère de nouvelle ligne, qui sera affiché tel quel, tout le reste est cohérent avec la règle white-space:normal.

<p style="white-space: pre-line">
	fly63
	com
</p>

L'effet d'affichage est :

'fly63

com'

Apprentissage recommandé :

tutoriel vidéo html

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!