Teks-hiasan-garis - Trik CSS

Anonim

The text-decoration-lineharta menghiasi teks dengan garis bawah, overline, garis-melalui, atau gabungan orang-orang garis.

p ( text-decoration-line: underline; )

Nilai

  • none: tidak ada garis yang ditambahkan, dan mana-mana baris yang ada dihapuskan - misalnya nonemenghilangkan garis bawah lalai pada pautan.
  • underline: menambah garis bawah 1px di bawah teks.
  • overline: menambah garis besar 1px di atas teks.
  • line-through: menambah baris 1px melalui teks.
  • inherit: mewarisi hiasan ibu bapa.

Nilainya blinkada dalam spesifikasi W3C, tetapi tidak digunakan lagi dan tidak akan berfungsi pada penyemak imbas semasa. Ketika bekerja, teks itu kelihatan "berkedip" dengan cepat menukarnya antara 0% dan 100% kelegapan.

Menggabungkan Nilai

Anda boleh menggabungkan underline, overlineatau line-throughnilai dalam senarai terpisah ruang untuk menambah baris hiasan pelbagai:

p ( text-decoration-line: overline underline line-through; )

Penggunaan

Tempat text-decoration-linepenginapan ini hampir sama dengan text-decorationharta tanah asal . Sekiranya semua yang anda mahu lakukan adalah menambahkan baris atau baris ke teks anda, text-decorationadalah pilihan yang lebih baik kerana ia disokong oleh setiap penyemak imbas, bahkan yang lama. Umumnya, menggunakan text-decoration-linedeklarasi hanya masuk akal ketika anda menulis peraturan gaya lama yang merangkumi text-decoration-styleatau text-decoration-colordeklarasi. Sekiranya anda ingin menggunakan ketiga-tiganya bersama-sama, anda boleh menggunakan text-decorationharta tanah.

Shorthand

text-decoration-lineboleh digunakan dalam kombinasi dengan text-decoration-styledan text-decoration-colordalam text-decorationharta CSS3 yang pendek (pada masa ini hanya Firefox menyokong sepenuhnya ini):

.underlined ( text-decoration: underline dotted red; )

Demo

Demo ini akan berfungsi di Safari, Firefox, dan Chrome dengan ciri platform web eksperimen diaktifkan. Yang blinknilai tidak termasuk.

Lihat barisan teks-hiasan Pen oleh CSS-Tricks (@ css-tricks) di CodePen.

Berkaitan

  • hiasan teks
  • gaya hiasan-teks
  • teks-hiasan-warna
  • teks-hiasan-langkau

Maklumat lanjut

  • text-decoration-line dalam spesifikasi W3C
  • text-decoration-line di MDN

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
31 * † 7.1 * 6 ‡ Tiada Tiada Tiada 8 *

* dengan -webkitawalan
† dengan bendera ciri Platform Web eksperimental diaktifkan
‡ 6 - 35 dengan -mozawalan, tidak diperbaiki pada 36.