Bagaimana untuk menetapkan jarak aksara dalam css-tutorial css-php.cn

Bagaimana untuk menetapkan jarak aksara dalam css

青灯夜游

Lepaskan： 2021-10-12 16:26:49

asal

91339 orang telah melayarinya

Cara menetapkan jarak perkataan dalam css: 1. Gunakan atribut jarak huruf, sintaks "letter-spacing: spacing value;"; 2. Gunakan atribut word-spacing, sintaks "word-spacing : nilai jarak;" .

Bagaimana untuk menetapkan jarak aksara dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Bagaimana untuk menetapkan jarak perkataan dalam css? Laraskan jarak antara teks? Artikel berikut akan memperkenalkannya kepada anda.

Kaedah 1: Gunakan atribut jarak huruf - jarak aksara

Atribut jarak huruf menambah atau mengurangkan ruang antara aksara (jarak aksara), yang mentakrifkan Bagaimana banyak ruang untuk dimasukkan antara kotak aksara teks. Oleh kerana glif aksara biasanya lebih sempit daripada kotak aksaranya, menetapkan nilai panjang melaraskan jarak biasa antara huruf. Oleh itu, normal adalah bersamaan dengan nilai 0.

Untuk atribut ini: setiap aksara Cina dianggap sebagai "watak", dan setiap huruf Inggeris juga dianggap sebagai "watak"! Jadi semua orang harus memberi perhatian yang teliti.

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<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>

Salin selepas log masuk

Bagaimana untuk menetapkan jarak aksara dalam css

Kaedah 2: Gunakan atribut jarak perkataan--jarak perkataan

<🎜 Atribut jarak perkataan menambah atau mengurangkan ruang antara perkataan (iaitu, jarak perkataan dalam atribut ini, "perkataan" ditakrifkan sebagai rentetan yang dikelilingi oleh aksara ruang putih.

Maksudnya, atribut ini melaraskan jarak berdasarkan ruang:

Jika berbilang huruf disambungkan bersama, ia akan dianggap sebagai perkataan-spacing A word;
Jika aksara Cina dipisahkan dengan ruang, aksara Cina yang dipisahkan dianggap sebagai perkataan yang berbeza dan atribut jarak perkataan adalah sah pada masa ini.

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<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>

Salin selepas log masuk

Bagaimana untuk menetapkan jarak aksara dalam css

(Mempelajari perkongsian video:

tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk menetapkan jarak aksara dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!