ホームページ > 記事 > ウェブフロントエンド > CSSの空白属性の使い方
CSSの空白属性の使い方
- 青灯夜游オリジナル
- 2019-05-27 14:09:075529ブラウズ
css ホワイトスペース属性は、要素内のホワイトスペースの処理方法を設定するために使用されます。たとえば、white-space:nowrap が設定されている場合、行頭と行末のすべての改行とスペースがマージされます。テキストは折り返されず、
タグが見つかるまで同じ行に続きます。
CSS の空白属性を使用するにはどうすればよいですか?
ホワイトスペース属性は、要素内のホワイトスペースの処理方法を設定します。
この属性は、レイアウト プロセス中に要素内の空白文字を処理する方法を宣言します。
構文:
white-space : normal | pre | nowrap | pre-wrap | pre-line ;
属性値:
normal: デフォルト。空白はブラウザによって無視されます。
pre: 空白スペースはブラウザによって保持されます。これは、HTML の
タグのように動作します。 <p>nowrap: テキストは折り返されません。テキストは、<br> タグが見つかるまで同じ行に続きます。 </p><p>pre-wrap: 空白シーケンスを保持しますが、行は通常どおり折り返されます。 </p><p>pre-line: 空白シーケンスを結合しますが、改行は保持します。 </p><p><strong>注: </strong>pre-wrap と pre-line の値は CSS 2.1 で新しく追加されたものです。 </p><p>注: Internet Explorer (IE8 を含む) のどのバージョンでも、属性値「inherit」はサポートされていません。 </p><p><span style="font-size: 18px;"><strong>css 空白プロパティの例</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>出力:
以上がCSSの空白属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。