Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menetapkan jarak aksara dalam css
Bagaimana untuk menetapkan jarak aksara dalam css
- 青灯夜游asal
- 2021-10-12 16:26:4991432semak imbas
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;" .
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>
Kaedah 2: Gunakan atribut jarak perkataan--jarak perkataan
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.
<!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>
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!