Hat kelepçesi - CSS Hileleri

line-clampHatların belirli sayıda özellik kesikler metni.

Spesifikasyonu şu anda bir Editör Taslağı, bu yüzden burada hiçbir şeyin değişmez olmadığı anlamına geliyor çünkü devam eden bir çalışma. Bununla birlikte, bir kısaltma olarak tanımlanıyor max-linesve block-overflowbunlardan ilki, Aday Tavsiyesinde düşürülme riski altında olduğu belirtiliyor.

max-linesİşlevinin (kesmeden önce satır sayısını belirleme) halihazırda içine yerleştirilmiş olması line-clampve daha fazla soyutlama gereksiz olabileceği için nasıl karıştırılacağını görmek kolaydır . Ama bu bizi yoldan çıkarıyor, o yüzden devam edelim.

Sözdizimi

.module ( line-clamp: (none | ); )

line-clamp spesifikasyonun mevcut taslağında aşağıdaki değerleri kabul eder:

none: satır sayısı için bir maksimum ayarlamaz ve sonuç olarak hiçbir kesinti olmaz.
: içeriği kesmeden önce maksimum satır sayısını ayarlar ve ardından son satırın sonunda bir üç nokta (…) görüntüler.

Bu üç nokta, 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.

Hey, bunu metin taşmasıyla yapamaz mıyım?

Güzel soru dostum ve cevap şu ki ...

(Orada ne yaptığımı gördün mü?)

… Sorta.

text-overflowgerçekten de ellipsismetni kesecek bir değere sahip mi:

.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )

CodePen'de Geoff Graham'ın (@geoffgraham) Kalem metni taşmasına bakın.

Güzel güzel, bu iyi bir başlangıç. Peki ya üç noktayı ilk satırda değil, örneğin metnin üçüncü satırında bir yerde tanıtmak istersek?

İşte burada line-clampdevreye giriyor. Bunun gerçekleşmesi için üç özelliğin bir kombinasyonunun kullanıldığını unutmayın:

.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )

CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Kalem hat kıskacına (-webkit) bakın.

Firefox bunu şimdi, tam olarak bu şekilde ( -webkit-önekler ve tümü ile) destekliyor .

Öyleyse, yakalama nedir?

Şu an itibariyle tarayıcı desteği var. Hat kıskaçları, şu anda Editör Taslağında bulunan ve şu anda tamamen desteklenmeyen CSS Taşma Modülü Düzey 3'ün bir parçasıdır.

Önekle birlikte bazı satır kenetleme eylemi elde edebiliriz -webkit-(bu, garip bir şekilde, tüm büyük tarayıcılarda çalışır). Aslında, yukarıdaki demo böyle yapıldı.

İstersek JavaScript yoluna gidebiliriz. Clamp.js hile yapacak:

CodePen'de Geoff Graham (@geoffgraham) tarafından yazılan Kalem hat kıskacına (clamp.js) bakın.

Tarayıcı Desteği

Bu, WebKit'in hat kelepçesinin tescilli ve belgesiz uygulaması için destek sağlar.

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.