CSSでテキストの間隔を設定するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSSでテキストの間隔を設定するにはどうすればよいですか?

青灯夜游

リリース： 2019-05-23 18:44:26

オリジナル

40285 人が閲覧しました

CSSテキストとテキストの間の間隔を調整するにはどうすればよいですか?そんな疑問を持つ友人も多いと思います。この章ではCSSで文字の間隔を設定する方法を紹介します。困っている友人は参考にしていただければ幸いです。

CSSでテキストの間隔を設定するにはどうすればよいですか?

#1.css の単語間隔属性単語間隔の設定 (単語間の間隔)

word-spacing 属性は、単語間の間隔 (つまり、単語間隔) を増加または減少させます。この属性では、「word」が定義されます。 as 空白文字で囲まれた文字列。つまり、この属性はスペースに基づいて間隔を調整します。複数の文字が結合されている場合、それらは単語間隔によって 1 つの単語とみなされ、漢字がスペースで区切られている場合は、区切られた漢字は 1 つの単語とみなされます。別の単語については、現時点では word-spacing 属性が有効です。

単語間隔の構文:

word-spacing:值;

ログイン後にコピー

この属性でサポートされる属性値は次のとおりです:

normal: 単語間の標準的な間隔を定義します。デフォルト値。

length: 単語間の固定スペース (長さの値) を定義します。

inherit: word-spacing 属性の値を親要素から継承することを指定します。

注:

長さの値として指定すると、単語間の通常の間隔が調整されるため、normal は 0 に設定するのと同じです。負の長さの値を指定できるようにします。これにより、単語が互いに詰め込まれます。

単語の間隔を設定する

word-spacing 属性の例を見てみましょう そして、この属性が単語間の間隔をどのように設定するかを直観的に感じてみましょう:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css word-spacing属性设置字间距</title>
		<style>
			.demo{
				width:500px;
				height: 500px;
				margin: 50px auto;
			}
			p{
				word-spacing:20px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>a b c d 你 好 a ！</p>
			<p>ab cd 你好a！</p>
		</div>
	</body>
</html>

ログイン後にコピー

の内容2 つの p タグは同じです。違いは、最初の p タグの各文字がスペースで区切られているが、2 番目の p タグのすべての文字がスペースで区切られているわけではないことです。設定後の効果を見てみましょう。間隔距離を 20 ピクセルにします:

CSSでテキストの間隔を設定するにはどうすればよいですか?

css 文字間隔プロパティ文字間隔の設定letter-spacing プロパティは、文字間の間隔 (文字間隔) を増減します。このプロパティは、文字間の間隔を定義します。文字ボックスの間に挿入します。文字グリフは通常、その文字ボックスよりも狭いため、長さの値を指定すると、文字間の通常の間隔が調整されます。したがって、normal は値 0 と同等です。この属性の場合: 各漢字は「文字」とみなされ、各英語文字も「文字」とみなされます。したがって、誰もが細心の注意を払う必要があります。

この属性でサポートされる属性値は、word-spacing 属性と同様です。word-spacing 属性を参照できます。

単語の間隔を設定する

letter-spacing プロパティの例を見てみましょう

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css letter-spacing属性设置字间距</title>
		<style>
			.demo{
				width:500px;
				height: 500px;
				margin: 50px auto;
			}
			p{
				letter-spacing:20px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>a b c d 你 好 a ！</p>
			<p>ab cd 你好a！</p>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

word-spacing 属性と比較すると、letter-spacing 属性は、各文字、文字などが区切られているかどうかに関係なく、テキストと左右のテキストの間の間隔を設定することがわかります。スペース、さらにはスペース文字も他の文字から間隔をあけて配置されます。

CSSでテキストの間隔を設定するにはどうすればよいですか?