text-align-last
metnin 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.right
son 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.start
Metni temel alarakdirection
metni satırın "başlangıcına" hizalar - LTR dilleri için sol, RTL dilleri için sağ.end
direction
metnin esas alınarak son satırı satırın "sonuna" hizalar - LTR dilleri için sağ, RTL dilleri için sol.auto
varsayılan. Ayarlanmışsa, son metin satırını öğenintext-align
özelliğiyle eşleşecek şekilde hizalar . Ayarlanmamışsa,auto
metni başa hizalar.inherit
text-align-last
üst öğenin özelliğini uygular .
Demo
Bu demo, farklı text-align-last
değerleri iş başında gösterir . Not: Internet Explorer, start
veya end
değerlerini desteklemez .
CodePen'de CSS-Tricks (@ css-tricks) tarafından kalem metnini son hizalayın.
İlgi noktaları
Internet Explorer'da, text-align-last
yalnızca text-align
seçili öğedeki metnin geri kalanı olarak ayarlandığında çalışır justify
. Ayrıca, IE start
veya end
değerini tanımıyor .
Mozilla tarayıcılarında, öğedeki text-align-last
metnin 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, div
içinde beş paragraf olan bir paragrafınız varsa, text-align-last
beyanınız paragrafların her birinin son satırına uygulanacaktır.
Kullanmak isterseniz text-align-last
kapta yalnızca en son satırında, kullanmak mümkün olabilir :last-child
veya :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 |