Maison > Article > interface Web > Comment utiliser l'attribut d'espace blanc CSS
Comment utiliser l'attribut d'espace blanc CSS
- 青灯夜游original
- 2019-05-27 14:09:075593parcourir
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!