block-overflowÖzellik metnini keser ve daha fazla içerik tarafından belirlenir hatlarının sayısının ardından üç nokta veya özel dizesi ekleyerek aşağıdaki gösterir max-linesmülkiyet.
Özellik, Editörün CSS Taşma Modülü Seviye 3 spesifikasyonunun Taslağında sunulmuştur. Bu şu anda deneysel olduğu ve devam eden bir çalışma olduğu anlamına geliyor. Aslında, mülkün yeniden adlandırılmasıyla ilgili konuşmayı içeren sohbeti takip edebilirsiniz.
Sözdizimi
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow aşağıdaki değerleri kabul eder:
clip: İzlenecek daha fazla metni belirtmek için bir karakter girmez. Bunun yerine, içerik yalnızca kesilir ve son karakterde kesilir.ellipsis: Son satırın sonunda bir üç nokta (…) görüntüler. Bir Unicode karakteri (U + 2026) olarak işlenmelidir, ancak kullanılan Kullanıcı-Aracının içerik dili ve yazma moduna bağlı olarak bir eşdeğeriyle değiştirilebilir.: Son satırın sonunda özel metni (örn. “Daha fazla oku →”) görüntüler. Spesifikasyon, dize "saçma" uzunsa, Kullanıcı Aracının dizeyi bir üç nokta ile değiştirebileceğini söylüyor.
Yine, tüm bunlar deneysel, devam eden bir çalışmadır. Bu değerler değişebilir. Veya daha fazlası eklenebilir. Örneğin, metni ortada kırpmak gibi daha fazla şey yapabilecek "daha akıllı" bir üç nokta çağrısı yapıldı:
One thing led to another and… yada yada yada, that was that.line-clampKısaca kullan
Ve özelliklerinin line-clampkısaltılmış halini kullanarak hemen hemen aynı şeyi elde edebiliriz .block-overflowmax-lines
O anda tanımlı oluyor gibi olsa da, line-clampyalnızca tek bir sayısal değer kabul eder max-linesve dolaylı olarak ayarlar block-overflowiçin ellipsisdeğer. Yani, kesme için özel bir dize kullanmak istiyorsanız, bunun yerine uzun biçimi kullanmalısınız.
Tarayıcı Desteği
Şu anda yok, ancak WebKit'in tescilli uygulamasını kullanarak biraz destek alabilirsiniz line-clamp:
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Hayır | 17 | 5 * |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2.3 * | 5.0-5.1 * |