Bagaimana untuk menjadikan ruang antara perkataan lebih besar dalam css

青灯夜游
Lepaskan: 2023-01-07 11:47:09
asal
3160 orang telah melayarinya

Dalam CSS, anda boleh menggunakan atribut jarak huruf untuk menjadikan ruang antara perkataan lebih besar Anda hanya perlu menambah gaya "jarak huruf: nilai jarak;" pada elemen bekas yang mengandungi teks.

Bagaimana untuk menjadikan ruang antara perkataan lebih besar dalam css

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

Css menjadikan ruang antara perkataan lebih besar

Dalam css, anda boleh menggunakan atribut jarak huruf untuk menjadikan ruang antara perkataan menjadi lebih besar lebih besar. Untuk atribut ini: setiap aksara Cina dianggap sebagai "watak", dan setiap huruf Inggeris juga dianggap sebagai "watak"!

Contoh: atribut jarak huruf menjadikan ruang antara perkataan lebih besar

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css letter-spacing属性设置字间隔</title>
		<style>
			.demo {
				height: 100px;
				margin: 10px 0;
				border: 1px solid red;
			}

			.spacing {
				letter-spacing: 20px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>hello,你好呀!</p>
			<p>ab cd 你好00)!</p>
		</div>
		<div class="demo">
			<p class="spacing">hello,你好呀</p>
			<p class="spacing">ab cd 你好00)!</p>
		</div>
	</body>
</html>
Salin selepas log masuk

Rendering:

Bagaimana untuk menjadikan ruang antara perkataan lebih besar dalam css

Perihalan:

Sifat jarak huruf menambah atau mengurangkan ruang antara aksara (jarak aksara) Sifat ini mentakrifkan jumlah ruang yang disisipkan antara kotak aksara teks. Oleh kerana glif aksara biasanya lebih sempit daripada kotak aksaranya, menetapkan nilai panjang melaraskan jarak biasa antara huruf.

Nilai atribut yang boleh ditetapkan:

描述
normal 默认。规定字符间没有额外的空间。
length 定义字符间的固定空间(允许使用负值)。

Pembelajaran yang disyorkan: Tutorial video CSS

Atas ialah kandungan terperinci Bagaimana untuk menjadikan ruang antara perkataan lebih besar dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!