Metin taşması - CSS Hileleri

Anonim

CSS'deki text-overflowözellik, metnin öğenin kutusundan taştığında kırpıldığı durumlarla ilgilenir. Kırpılabilir (yani kesilebilir, gizlenebilir), üç nokta görüntülenebilir ('…', Unicode Aralık Değeri U + 2026) veya yazar tanımlı bir dizge (yazar tarafından tanımlanan dizeler için geçerli tarayıcı desteği yoktur) görüntülenebilir.

.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )

Not o text-overflowkabın sadece oluşan overflowözellik değerine sahiptir hidden, scrollya da autove white-space: nowrap;.

Metin taşması, yalnızca blok veya satır içi blok seviyesindeki öğelerde olabilir, çünkü öğenin taşması için genişliğe sahip olması gerekir. Taşma, yön özelliği veya ilgili öznitelikler tarafından belirlenen yönde gerçekleşir.

Aşağıdaki demo, text-overflowtüm olası değerler dahil olmak üzere özelliğin davranışını gösterir . Tarayıcı desteği değişiklik gösterir!

Bu Kaleme bakın!

Ayar overflowiçin scrollya autoda, ek metin ortaya çıkarmak için kaydırma çubuklarını görüntüler hiddenolmayacak. Gizli metin, elipsler seçilerek seçilebilir.

Eski şeyler

Spesifikasyonun eski bir sürümü, üç nokta için bir görüntünün URL'sini kullanabileceğinizi söylüyor, ancak bu düşürülmüş gibi görünüyor.

Örneğin text-overflow: ellipsis ellipsis;, aynı kabın sol ve sağ taraflarındaki taşmayı kontrol edecek iki değerli bir sözdizimi vardır . Bunu başarmanın nasıl mümkün olacağından emin değilim. Belki çok küçük bir kapta ortalanmış metin? Yeni spesifikasyon bunun yanı sıra bir dizeyi tanımlamanın "risk altında" olduğunu söylüyor.

Nereden ellipsis-wordgeldiğinden emin değilim . Spesifikasyonda veya WebPlatform.org dışındaki herhangi bir belgede yer almıyor.

text-overflowKullanılan özellik kombinasyonu için kestirme olması text-overflow-modeve text-overflow-ellipsisancak artık değil ve bu ayrı özellikler yoktur.

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
25+ 5.1+ 19+ 12.1+ IE8 + 2.1+ 3.2+