CSSの空白属性の使い方-CSSチュートリアル-php.cn

CSSの空白属性の使い方

青灯夜游

リリース： 2019-05-27 14:09:07

オリジナル

5622 人が閲覧しました

css ホワイトスペース属性は、要素内のホワイトスペースの処理方法を設定するために使用されます。たとえば、white-space:nowrap が設定されている場合、行頭と行末のすべての改行とスペースがマージされます。テキストは折り返されず、
タグが見つかるまで同じ行に続きます。

CSSの空白属性の使い方

CSS の空白属性を使用するにはどうすればよいですか?

ホワイトスペース属性は、要素内のホワイトスペースの処理方法を設定します。

この属性は、レイアウトプロセス中に要素内の空白文字を処理する方法を宣言します。

構文:

white-space : normal | pre | nowrap | pre-wrap | pre-line ;

ログイン後にコピー

属性値:

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

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

 タグのように動作します。 </p><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の空白属性の使い方