Pengalaman dalam CSS penataan huruf Cina

Ketahui standard web selama beberapa bulan dan reka serta hasilkan halaman web mengikut piawaian. Saya sentiasa ingin menulis sesuatu dan menyelesaikan pemikiran dan pengalaman saya. Artikel ini ditulis terutamanya untuk reka bentuk tata huruf bahasa Inggeris jarang dilakukan, jadi ia tidak terlibat.

Mula-mula, kami akan memperkenalkan aplikasi yang agak mudah seperti cara menetapkan fon, warna, saiz dan perenggan kosong Kemudian, kami akan memperkenalkan perkara seperti topi jatuh dan inden baris pertama. Akhir sekali, kita akan bercakap tentang beberapa susun atur bahasa Cina yang biasa digunakan pada halaman web, seperti pemotongan aksara Cina, pembalut perkataan dengan lebar tetap (bungkus perkataan dan pemecahan perkataan), dsb. Kerana saya hanya menulis beberapa pengalaman aplikasi, jika anda memerlukan pengenalan lengkap kepada sifat CSS, sila rujuk manual CSS.

1. Cara menetapkan fon teks, warna dan saiz - gunakan fon

gaya fon untuk menetapkan huruf condong, seperti fon -style : italic;

font-weight menetapkan ketebalan teks, seperti font-weight: bold; atau 9pt, berbeza Untuk isu paparan unit, sila rujuk manual CSS)

ketinggian baris menetapkan jarak baris, seperti ketinggian baris: 150%; warna menetapkan warna teks (nota bukan warna fon), seperti warna: merah;

keluarga fon menetapkan fon, seperti keluarga fon: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Dinasti Lagu, sans -serif; (Ini adalah kaedah penulisan biasa)

Semua di atas boleh ditulis dalam satu baris atribut fon (kecuali atribut warna yang perlu ditulis secara berasingan):

font : italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans -serif; text-align

penggunaan perenggan bahasa Cina tag, margin boleh digunakan di kiri dan kanan (bersamaan dengan lekukan), dan ruang sebelum dan selepas perenggan. Contohnya:

Kaedah penjajaran teks ialah penjajaran teks, contohnya:

Kaedah penjajaran termasuk kiri, kanan dan justify ( justify both ends) )

p{ 
margin: 18px 6px 6px 18px; /*分别是上、右、下、左，十二点开始的顺时针方向*/ 
}

p{ 
text-align: center; /*居中对齐*/ 
}

Contohnya:

boleh digabungkan dengan susun atur arah.

4 Masalah dengan peluru - menggunakan gaya senarai

p{ 
writing-mode: tb-rl; 
}

Dalam bulet CSS termasuk cakera (titik pepejal), bulatan (bulatan terbuka), segi empat sama (pejal pejal), perpuluhan (angka Arab), roman bawah (angka Rom kecil), roman atas (angka Rom besar), alfa bawah (huruf Inggeris kecil), huruf alfa atas (huruf Inggeris besar) huruf), tiada (tiada). Sebagai contoh, tetapkan titik tumpu senarai (ul atau ol) kepada petak, seperti:

Selain itu, gaya senarai juga mempunyai beberapa nilai Sebagai contoh, anda boleh menggunakan beberapa nilai gambar kecil sebagai peluru hanya tulis url ("alamat imej") terus di bawah gaya senarai. Ambil perhatian bahawa jika margin-kiri senarai item ditetapkan kepada sifar, bulet dengan kedudukan gaya senarai: di luar (lalai adalah di luar) tidak akan dipaparkan. Malangnya, peluru yang disebutkan di atas nampaknya tidak dapat menetapkan saiz, dan titik dan petak sentiasa sama. Dan penjajaran menegak tidak boleh ditetapkan.

5 Drop cap - gunakan: huruf pertama

li{ 
list-style: square; 
}

Objek pseudo: huruf pertama boleh digunakan dengan saiz fon dan terapung Cipta kesan drop cap.

Contohnya:

6 Lekukan baris pertama - gunakan teks-inden

p:first-letter{ 
padding: 6px; 
font-size: 32pt; 
float: left; 
}

Sebagai contoh, perenggan Cina biasanya mempunyai dua aksara Cina yang tinggal sebelum setiap perenggan. Anda boleh menulis seperti ini: Jika saiz fon ialah 12px, maka inden teks: 2em akan diinden sebanyak 24px.

p{ 
text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/ 
}

Sebagai contoh, anda boleh menggunakan penjajaran ruby ​​​​untuk menetapkan penjajaran. Ini dilihat dalam manual CSS Anda boleh menyemak item penjajaran ruby ​​​​untuk butiran.

8 Pemangkasan aksara Cina lebar tetap - gunakan limpahan teks

Menggunakan bahasa latar belakang untuk memotong kandungan medan dalam pangkalan data , contohnya, potong 12 aksara Cina (gunakan elips selepas itu). Tetapi kadang-kadang perlu untuk menapis tag html, dsb., tetapi menggunakan CSS untuk mengawal tidak mempunyai masalah ini. Contohnya, gunakan gaya berikut pada senarai:

li{ 
overflow:hidden; 
text-overflow:ellipsis; 
white-space:nowrap; 
}

不过只能处理文字在一行上的截断，不能处理多行。 

9、固定宽度汉字（词）折行 —— 使用word-break 

举个例子，比如说要在一个固定宽度容器里面显示很多地名（假设以空格分隔），为了避免地名中间断开（即一个字在上面而另一个字折断到下一行去了）。则可以使用word-break。比如：

值得注意的是里面的空格不能以 代替（最少要有一个软空格）。