CSSの空白プロパティの使い方-CSSチュートリアル-php.cn

CSSの空白プロパティの使い方

不言

リリース： 2018-12-10 09:13:56

オリジナル

4910 人が閲覧しました

CSSのCSSの空白プロパティの使い方プロパティは、ソーステキスト内で連続した半角スペースを表示したり、タブインデントを使用したり、ページ上で改行を表示したりする方法を設定するために使用されます。 CSS で空白属性を使用する方法を説明します。

CSSの空白プロパティの使い方

早速、具体的な内容を見てみましょう。

空白属性の使用方法

空白属性は次のように記述されます

CSSの空白プロパティの使い方: 值;

ログイン後にコピー

空白属性の値は次のとおりです

通常: デフォルト。空白はブラウザによって無視されます。

pre: 空白スペースはブラウザによって保持されます。 HTML の

 タグのように動作します。 </strong></p><p><strong>nowrap: テキストは <br> タグに到達するまで同じ行に続きます。 </strong></p><p><strong>pre-wrap: 空白シーケンスを維持しますが、通常どおりにラップします。 </strong></p><p><strong>pre-line: 空白シーケンスを結合しますが、改行は保持します。 </strong></p><p>具体的な例を見てみましょう<br/></p><p>コードは次のとおりです</p><p>HTML コード</p><pre class="brush:html;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p>两个或多个        单字节的
            空格</p>
</body>
</html>

ログイン後にコピー

「2 つの挿入」があります。「以上」と「半角スペース」の間に複数の半角スペースを入れ、2行目の改行にTabキーでインデントを入れます。

CSS 経由で幅 200 ピクセルのボックスに配置し、各空白プロパティ値が適用されたときの表示を比較します。

値が通常の場合

CSSコード

p {width:200px; background-color:#87cefa; CSSの空白プロパティの使い方: normal; }

ログイン後にコピー

ページ上では以下のように表示されます。連続する半角スペース、タブスペース、改行はすべて 1 つの半角スペースとして扱われ、ボックスの幅に合わせて折り返されます。

値が pre

CSS コード

p {width:200px; background-color:#87cefa; CSSの空白プロパティの使い方: pre; }

ログイン後にコピー

の場合、ページに次の効果が表示されます。なし。そのうちのChange

値がnowrapの場合

CSSコード

p {width:200px; background-color:#87cefa; CSSの空白プロパティの使い方: nowrap; }

ログイン後にコピー

が表示されますページは次のようになります。表示、行折り返しなし

#値が折り返し前の場合

CSSコード

p {width:200px; background-color:#87cefa; CSSの空白プロパティの使い方: pre-wrap; }
ログイン後にコピー
は、前の状態に加えて、ページ上に次の効果を表示します。
値が行前にある場合
CSSコード
p {width:200px; background-color:#87cefa; CSSの空白プロパティの使い方: pre-line; }
ログイン後にコピー
がページに次の効果を表示する場合

##上記はこの記事です。その他の関連コンテンツについては、PHP 中国語 Web サイトの
CSS ビデオチュートリアル列を参照してさらに学習してください。！！

以上がCSSの空白プロパティの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。