Son metin hizalama - CSS Hileleri

Anonim

text-align-lastmetnin son (veya tek) satırının zorunlu satır kesilmesinden hemen önceki hizalamasını kontrol etmenizi sağlar - örneğin bir paragrafın sonu veya bir
etiketten hemen önceki satır .

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

Bu yazının yazıldığı sırada, yalnızca Mozilla tarayıcıları ve Internet Explorer text-align-last(satıcı önekleriyle) desteklenir ve her birinin biraz farklı bir uygulaması vardır. Mülkün Chrome 35'te çalışmaya başlaması gerekiyordu, ancak Chrome 40'tan itibaren hala deneysel web platformları bayrağını gerektiriyor. İlgi Çekici Noktalar'da tarayıcı uygulamaları hakkında daha fazla ayrıntı.

Değerler

  • left son metin satırını kabın soluna hizalar.
  • rightson metin satırını kabın sağına hizalar.
  • center kaptaki son metin satırını ortalar.
  • justify metnin son satırını iki yana yaslar, böylece kabın tüm genişliğine yayılır ve gerekirse satır uzunluğunu artırmak için sözcükler arasına boşluk ekler.
  • startMetni temel alarak directionmetni satırın "başlangıcına" hizalar - LTR dilleri için sol, RTL dilleri için sağ.
  • enddirectionmetnin esas alınarak son satırı satırın "sonuna" hizalar - LTR dilleri için sağ, RTL dilleri için sol.
  • autovarsayılan. Ayarlanmışsa, son metin satırını öğenin text-alignözelliğiyle eşleşecek şekilde hizalar . Ayarlanmamışsa, autometni başa hizalar.
  • inherittext-align-lastüst öğenin özelliğini uygular .

Demo

Bu demo, farklı text-align-lastdeğerleri iş başında gösterir . Not: Internet Explorer, startveya enddeğerlerini desteklemez .

CodePen'de CSS-Tricks (@ css-tricks) tarafından kalem metnini son hizalayın.

İlgi noktaları

Internet Explorer'da, text-align-lastyalnızca text-alignseçili öğedeki metnin geri kalanı olarak ayarlandığında çalışır justify. Ayrıca, IE startveya enddeğerini tanımıyor .

Mozilla tarayıcılarında, öğedeki text-align-lastmetnin geri kalanı için herhangi bir hizalama belirtilmemiş olsa bile, zorunlu satır sonundan önceki son satırda çalışacaktır.

Ayrıca text-align-last, yalnızca metnin mutlak son satırının değil, seçilen öğedeki tüm son satırların hizalamasını ayarladığını bilmeye değer . Bu nedenle, örneğin, diviçinde beş paragraf olan bir paragrafınız varsa, text-align-lastbeyanınız paragrafların her birinin son satırına uygulanacaktır.

Kullanmak isterseniz text-align-lastkapta yalnızca en son satırında, kullanmak mümkün olabilir :last-childveya :last-of-type. CSS'niz şuna benzer:

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

Aşağıdaki demoda, sol taraf, text-align-last: center;içinde birden çok paragraf bulunan bir div öğesine uygulanmış gösterir . Her paragrafın son satırının ortalandığına dikkat edin. Sağ taraf, text-align-last: center;div kullanılarak yalnızca son paragrafa uygulanmış gösterir :last-child.

CodePen'de CSS-Tricks (@ css-tricks) tarafından kalem metnini son hizalayın.

İlişkili

  • Metin hizalama
  • metin girintisi

Daha fazla bilgi

  • CSS Metin Modülü Düzey 3'te (W3C) metin hizalama
  • MDN'de metin hizalama
  • MSDN'de metin hizalama
  • Adobe'nin web platformu ekip blogunda metin hizalama
  • Webkit Bug 76173, Chrome'un text-align-last

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
Deneysel bayraklarla 35+ Hayır 34+ (ön ekli) Hayır 5.5+ (ön ekli) Hayır Hayır