Text-align-last - Trik CSS

Anonim

text-align-lastmembolehkan anda mengawal penjajaran baris teks terakhir (atau hanya) tepat sebelum garis putus dipaksa - misalnya akhir perenggan atau garis tepat sebelum
tag.

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

Pada masa penulisan ini, hanya penyemak imbas Mozilla dan Internet Explorer yang menyokong text-align-last(dengan awalan vendor), dan masing-masing mempunyai pelaksanaan yang sedikit berbeza. Harta itu sepatutnya mula berfungsi di Chrome 35, tetapi pada Chrome 40 ia masih memerlukan bendera platform web eksperimen. Lebih terperinci mengenai pelaksanaan penyemak imbas di Tempat Menarik.

Nilai

  • left menjajarkan baris terakhir teks di sebelah kiri bekas.
  • rightmenjajarkan baris terakhir teks di sebelah kanan bekas.
  • center memusatkan baris terakhir teks di dalam bekas.
  • justify membenarkan baris terakhir teks sehingga merangkumi lebar penuh wadah, memasukkan ruang antara kata-kata jika diperlukan untuk meningkatkan panjang baris.
  • startmenyelaraskan teks dengan "permulaan" baris berdasarkan directionteks - kiri untuk bahasa LTR, kanan untuk bahasa RTL.
  • endmenjajarkan baris terakhir ke "akhir" baris berdasarkan directionteks - kanan untuk bahasa LTR, kiri untuk bahasa RTL.
  • autolalai. Menyelaraskan baris terakhir teks agar sepadan dengan sifat elemen text-align, jika ia ditetapkan. Sekiranya tidak diatur, autosejajarkan teks ke permulaan.
  • inheritmenerapkan text-align-lastsifat elemen induk.

Demo

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

Lihat teks Pen-align-terakhir oleh CSS-Tricks (@ css-tricks) di CodePen.

Tempat Menarik

Di Internet Explorer, text-align-lasthanya berfungsi apabila text-alignteks yang selebihnya dalam elemen yang dipilih ditetapkan ke justify. Juga, IE tidak mengenali startatau endnilai.

Pada penyemak imbas Mozilla, text-align-lastakan berfungsi pada baris terakhir sebelum pemutusan garis paksa walaupun tidak ada penjajaran yang ditentukan untuk sisa teks dalam elemen.

Perlu diketahui juga bahawa text-align-lastmenetapkan penjajaran untuk semua baris terakhir dalam elemen yang dipilih, bukan hanya baris terakhir teks mutlak. Jadi, sebagai contoh, jika anda memiliki divlima perenggan di dalamnya, text-align-lastdeklarasi anda akan berlaku pada baris terakhir setiap perenggan tersebut.

Sekiranya anda ingin menggunakan text-align-lasthanya pada baris terakhir di dalam bekas, anda mungkin dapat menggunakan :last-childatau :last-of-type. CSS anda akan kelihatan 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, paparan sebelah kiri text-align-last: center;diterapkan pada div dengan beberapa perenggan di dalamnya. Perhatikan bahawa baris terakhir setiap perenggan berpusat. Tayangan sebelah kanan text-align-last: center;hanya digunakan pada perenggan terakhir di dalam div menggunakan :last-child.

Lihat teks Pen-align-terakhir oleh CSS-Tricks (@ css-tricks) di CodePen.

Berkaitan

  • selaras teks
  • teks-inden

Maklumat lanjut

  • text-align-last dalam Modul Teks CSS Tahap 3 (W3C)
  • text-align-last di MDN
  • text-align-last di MSDN
  • text-align-last di blog pasukan platform web Adobe
  • Webkit Bug 76173, mengenai pelaksanaan Chrome dari text-align-last

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
35+ dengan bendera eksperimen Tidak 34+ (awalan) Tidak 5.5+ (awalan) Tidak Tidak