İçeriğe atla
TextArray1.87.0
%100 yerel

CSS line-clamp oluşturucu

N satır sonra metni kırpan, elipsis veya fade efektiyle CSS kuralı oluşturun.

Çıkış
İlgili araçlar
CSS clamp() oluşturucuGeliştirici araçları
Metni kısaltMetin manipülasyonu
CSS text-shadow oluşturucuyeniGeliştirici araçları
i18n anahtar farkıGeliştirici araçları
TOML'den JSON'ye dönüştürücüGeliştirici araçları
SQL'den JSON'aGeliştirici araçları
CSS line-clamp oluşturucu
Ürün açıklamaları, yorum ön izlemeleri ve başlıklar hep aynı numaraya ihtiyaç duyar: birkaç satır metni göster ve geri kalanını temizce kes, uzun paragrafların düzeni mahvetmesinden kaçın. Bu oluşturucu CSS kuralını sana yazar, bir stil sayfasında ".line-clamp" sınıfı olarak yapıştırmaya hazır.
Tek satırlı kesme için tek satırlı modu seç – başlıklar ve tablo hücreleri için kullanılan klasik "overflow: hidden; text-overflow: ellipsis; white-space: nowrap" kombinasyonu – veya birden fazla satırı kesme işlemi için çok satırlı modu seç, bu da belirlediğin satır sayısından sonra kesmek için "-webkit-line-clamp" kullanır, seçtiğin satır yüksekliğini onurlandırır. Fade seçeneğini etkinleştir, son satırı elipsis yerine arka plana gradyenle yaydığında, görüntüler veya renkli kartlar üzerinde daha iyi görünür. Fallback seçeneği, line-clamp desteklenmeyen tarayıcıların kırpılmamış bir metin duvarı yerine mantıklı max-height csonklaması almasını sağlamak için bir "@supports" bloğu ekler; Tailwind seçeneği, araması yapmanız gerekmez diye uygun yardımcı sınıfını ekler ("truncate" veya "line-clamp-N").
Ön izleme alanına bir cümle yazın veya yapıştırın ve araç metninizin seçilen satır sayısına nasıl ayrılacağını tahmin eder, böylece tasarıma işlemeden önce satır sayısını ön kontrol edebilirsiniz. Tahmin gerçek yazı tipleri ve kapsayıcıların ölçümü yerine ortalama okuma satırı uzunluğuna dayanır – bu, makul bir satır sayısı seçmek için bir kılavuzdur, piksel-kesin bir oluş değil.
Her şey tarayıcınızda yerel olarak çalışır: CSS yazarken oluşturulur, hiçbir şey hiçbir yere yüklenmez ve sonucu kopyalayabilir, .txt dosyası olarak indirebilir veya işe devam etmek için başka bir araç girişine doğrudan gönderebilirsiniz.
FAQ
Tek satırlı ve çok satırlı kesme arasındaki fark nedir?
Tek satırlı, text-overflow: ellipsis ve white-space: nowrap kombinasyonunu kullanır ve her tarayıcıda çalışır. Çok satırlı, seçtiğin satır sayısından sonra kesmek için -webkit-line-clamp kullanır ve bu araçtan sana oluşturacağı display: -webkit-box ayarını gerektirir.
Fade seçeneği neden -webkit-line-clamp'ı kaldırıyor?
Gradyan fade'in sabit bir max-height ve konumlandırılmış bir pseudo-element gereklidir, line-clamp kutu modeli değil, bu nedenle araç fade açık olduğunda max-height tabanlı bir kurala geçer – hem tek satırlı hem de çok satırlı modlar için.
Modern tarayıcılar için hala fallback'e ihtiyacım var mı?
Tüm mevcut ana tarayıcılar -webkit-line-clamp'ı destekler, bu nedenle fallback esas olarak eski veya olağandışı tarayıcıları korur. Açık bırakması güvenlidir: yalnızca modern tarayıcıların görmezden geldiği bir "@supports not" bloğunun içinde çalışır.
Ön izleme ne kadar doğru?
Bu, gerçek yazı tipinizin veya kapsayıcı genişliğinizin ölçümü değil, ortalama satır yüksekliğine dayanan bir tahmindir. Seçtiğin satır sayısının doğru hissedilip hissetmediğini belirlemek için kullanın, sonra sayfanızda gerçek sonucu kontrol edin.
Ön izleme metnim bir yere yükleniyor mu?
Hayır. CSS ve ön izleme tamamen tarayıcınızda oluşturulur – yazdığınız hiçbir şey bir sunucuya gönderilmez.