Teks-garis bawah-mengimbangi - Trik CSS

The text-underline-offsetharta di CSS menetapkan jarak garis bawah teks dari kedudukan asal mereka.

.text ( text-underline-offset: 0.5em; )

Sebaik sahaja anda menggunakan garis bawah untuk elemen yang menggunakan text-decorationdengan nilai garis bawah , anda boleh mengatakan sejauh mana garis itu dari teks anda menggunakan text-underline-offsetharta tanah.

Nilai

• auto: (Default) Penyemak imbas akan menentukan offset yang sesuai untuk garis bawah.
• : Mana-mana panjang yang sah dengan unit yang ditentukan (termasuk nilai negatif). Ini menggantikan sebarang maklumat dalam fon dan penyemak imbas lalai.
• percentage: Menentukan ofset garis bawah sebagai peratusan 1em pada fon elemen.
• initial: Tetapan lalai harta tanah, iaitu automatik.
• inherit: Mengamalkan nilai offset garis bawah ibu bapa.
• unset: Menghilangkan ofset semasa dari elemen.

Demo

Dalam demo berikut, anda boleh mengubah nilai text-underline-offsetuntuk melihat bagaimana ia mempengaruhi hiasan teks elemen:

Catatan

• text-underline-offset bukan sebahagian daripada singkatan dari text-decoration.
• Ia tidak berfungsi pada text-decorationbaris lain , seperti line-throughatau overline.
• Nilai negatif diterima, yang mengimbangi garis bawah ke dalam.

Ia tetap untuk keturunan

Setelah anda menetapkan hiasan untuk elemen, semua anak-anaknya juga akan mempunyai hiasan itu. Sekarang bayangkan anda mahu mengubah penggantian garis bawah untuk salah satu kanak-kanak:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-underline-offset: 1.5em; /* Doesn't work */ )

Ini tidak berfungsi kerana anda tidak dapat mengatasi penggantian garis bawah yang ditentukan oleh elemen nenek moyang. Agar ini berfungsi, anda perlu menetapkan kekhususan garis bawah untuk elemen itu sendiri:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-decoration: underline; text-underline-offset: 1.5em; /* It works! */ )

Digunakan menggunakan em

Manfaat menggunakan nilai relatif seperti em adalah bahawa ofset akan berskala dengan perubahan font-sizenilai. Sebaliknya, jika anda menggunakan unit panjang tetap (mis. Piksel), ofset tidak akan menyesuaikan diri dengan perubahan dan mungkin bukan jarak yang anda inginkan untuk teks anda:

Peratusan dan lata

Untuk harta ini, panjang akan diwarisi sebagai nilai tetap, dan tidak akan ditimbang dengan fon. Sebaliknya, peratusan akan diwarisi sebagai nilai relatif dan, oleh itu, skala dengan perubahan fon seperti yang diwarisi.

Demo berikut menunjukkan perbandingan antara menggunakan nilai em dan peratusan dalam hal pewarisan dan, seperti yang anda lihat, di sebelah kiri (di mana kita menggunakan em) nilai yang diwarisi adalah panjang tetap. Anda boleh menyemak nilai yang dikira di DevTools anda. Itu bererti tidak sesuai dengan perubahan fon. Namun, di sebelah kanan, teks mewarisi nilai relatif (dalam kes ini 100%); oleh itu timbangan mengimbangi dengan perubahan fon:

Mod Penulisan dan teks-garis bawah-kedudukan

Mempunyai mod penulisan menegak memberi kesan pada kedudukan garis bawah. Itu akan mengubah arah ofset yang dikenakan pada elemen. Main dengan nilai dalam demo berikut:

Berkaitan

• text-decoration
• text-underline-position
• text-decoration-thickness

Maklumat lanjut

Modul Hiasan Teks CSS Tahap 4 (Draf Editor)

Sokongan penyemak imbas

Pada masa penulisan ini, Firefox adalah satu-satunya penyemak imbas dengan sokongan penuh. Safari tidak menyokong nilai peratusan.

teks-garis bawah-mengimbangi

IE	Hujung	Firefox	Chrome	Safari	Opera
Tidak	Tidak	70+	Tidak	12.1+	Semua

Android Chrome	Android Firefox	Penyemak Imbas Android	Safari iOS	Opera Mini
Tidak	Tidak	Tidak	12.2+	Ya

teks-garis bawah-mengimbangi: peratusan

IE	Hujung	Firefox	Chrome	Safari	Opera
Tidak	Tidak	74+	Tidak	Tidak	Tidak

Android Chrome	Android Firefox	Penyemak Imbas Android	Safari iOS	Opera Mini
Tidak	Tidak	Tidak	Tidak	Ya