Maison > Article > interface Web > Comment utiliser l'attribut d'espace blanc CSS
L'attribut CSS white-space est utilisé pour définir la manière de gérer les espaces blancs dans les éléments. Par exemple, si white-space: nowrap est défini, tous les sauts de ligne et espaces au début et à la fin de la ligne seront fusionnés, le texte ne sera pas renvoyé à la ligne et continuera sur la même ligne jusqu'à ce que la balise
Comment utiliser l'attribut d'espace blanc CSS ?
L'attribut white-space définit comment gérer les espaces dans l'élément.
Cet attribut déclare comment gérer les caractères d'espacement dans les éléments pendant le processus de mise en page.
Syntaxe :
white-space : normal | pre | nowrap | pre-wrap | pre-line ;
Valeur de l'attribut :
normal : Par défaut. Les espaces blancs sont ignorés par le navigateur.
pre : Les espaces vides seront conservés par le navigateur. Il se comporte comme la balise
<p>nowrap : Le texte ne sera pas renvoyé à la ligne. Le texte continuera sur la même ligne jusqu'à ce que la balise <br> </p><p>pré-enveloppement : préserve les séquences d'espaces, mais enveloppe les lignes normalement. </p><p>pré-ligne : fusionne les séquences d'espaces mais conserve les nouvelles lignes. </p><p><strong>Remarque : </strong>Les valeurs pre-wrap et pre-line sont nouvelles dans CSS 2.1. </p><p>Remarque : Aucune version d'Internet Explorer (y compris IE8) ne prend en charge la valeur d'attribut « hériter ». </p><p><span style="font-size: 18px;"><strong>Propriété d'espace blanc CSS Exemple</strong></span></p><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <head> <style type="text/css"> .box{ width: 500px; border: 1px solid #000; margin-bottom:10px ; } .p1 { white-space: nowrap } </style> </head> <body> <div class="box"> <p> php中文网 php中文网 php中文网 php中文网 php中文网 php中文网 php中文网 php中文网 php中文网 </p> </div> <div class="box"> <p class="p1"> php中文网 php中文网 php中文网 php中文网 php中文网 php中文网 php中文网 php中文网 php中文网 </p> </div> </body> </html>
Sortie :
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!