Teks-rata-terakhir - Trik CSS

Anonim

text-align-lastmemungkinkan Anda mengontrol perataan baris teks terakhir (atau satu-satunya) tepat sebelum pemisah baris paksa - misalnya akhir paragraf atau baris tepat sebelum
tag.

.intro-graph ( text-align-last: center; )

Pada saat penulisan ini, hanya browser Mozilla dan Internet Explorer yang mendukung text-align-last(dengan prefiks vendor), dan masing-masing memiliki implementasi yang sedikit berbeda. Properti itu seharusnya mulai berfungsi di Chrome 35, tetapi mulai Chrome 40, properti itu masih memerlukan tanda platform web eksperimental. Detail lebih lanjut tentang implementasi browser di Lokasi Menarik.

Nilai

  • left meratakan baris terakhir teks ke kiri wadah.
  • rightmeratakan baris teks terakhir di sebelah kanan wadah.
  • center memusatkan baris teks terakhir di dalam wadah.
  • justify membenarkan baris terakhir teks sehingga mencakup lebar penuh wadah, menyisipkan spasi di antara kata-kata jika diperlukan untuk menambah panjang baris.
  • startmeratakan teks ke "awal" baris berdasarkan directionteks - kiri untuk bahasa LTR, kanan untuk bahasa RTL.
  • endmeratakan baris terakhir ke "akhir" baris berdasarkan directionteks - kanan untuk bahasa LTR, kiri untuk bahasa RTL.
  • autodefault. Meratakan baris terakhir teks agar sesuai dengan text-alignproperti elemen , jika disetel. Jika tidak disetel, autosejajarkan teks ke awal.
  • inheritmenerapkan text-align-lastproperti dari elemen induk.

Demo

Demo ini menunjukkan berbagai text-align-lastnilai dalam tindakan. Catatan: Internet Explorer tidak mendukung nilai startatau end.

Lihat Pen text-align-last by CSS-Tricks (@ css-trick) di CodePen.

Tempat Menarik

Di Internet Explorer, text-align-lasthanya berfungsi jika text-alignsisa teks di elemen yang dipilih disetel ke justify. Selain itu, IE tidak mengenali startatau endnilai.

Di browser Mozilla, text-align-lastakan bekerja pada baris terakhir sebelum pemutusan baris paksa meskipun tidak ada perataan yang ditentukan untuk sisa teks dalam elemen.

Perlu juga diketahui bahwa text-align-lastmenyetel perataan untuk semua baris terakhir dalam elemen yang dipilih, bukan hanya baris terakhir absolut teks. Jadi, misalnya, jika Anda memiliki a divdengan lima paragraf di dalamnya, text-align-lastdeklarasi Anda akan diterapkan ke baris terakhir dari setiap paragraf.

Jika Anda ingin menggunakan text-align-lasthanya pada baris terakhir dalam wadah, Anda mungkin dapat menggunakan :last-childatau :last-of-type. CSS Anda akan terlihat seperti ini:

#center-only-last p:last-child ( -ms-text-align-last: center; -moz-text-align-last: center; text-align-last: center; )

Dalam demo di bawah ini, tampilan sisi kiri text-align-last: center;diterapkan ke div dengan beberapa paragraf di dalamnya. Perhatikan bahwa baris terakhir setiap paragraf berada di tengah. Sisi kanan menunjukkan text-align-last: center;diterapkan hanya ke paragraf terakhir di dalam div menggunakan :last-child.

Lihat Pen text-align-last by CSS-Tricks (@ css-trick) di CodePen.

Terkait

  • text-align
  • teks-indentasi

Informasi Lebih Lanjut

  • text-align-last di CSS Text Module Level 3 (W3C)
  • text-align-last di MDN
  • text-align-last di MSDN
  • text-align-last di blog tim platform web Adobe
  • Bug Webkit 76173, terkait penerapan Chrome text-align-last

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
35+ dengan bendera eksperimental Nggak 34+ (diawali) Nggak 5.5+ (diawali) Nggak Nggak