CSS Line Clamp Generator

Metin kartı için maksimum satır sayısını seçin ve overflow ellipsis kullanan CSS line-clamp kuralı üretin.

Bu aracın ana girdisi tarayıcınızda işlenir ve harici API’ye gönderilmez. Yazı tipi ve arayüz dosyaları harici sağlayıcılardan yüklenebilir.

YULATOOLS · KULLANIM REHBERİ

CSS Line Clamp Generator

CSS line-clamp aracı, seçtiğiniz maksimum satır sayısına göre metni birkaç satırda kesen `.truncate` sınıfı için bir CSS kuralı üretir. Bildirimler arasında `display: -webkit-box`, dikey box yönü, `overflow: hidden` ve ellipsis davranışı bulunur.

Satır kesmek yalnız görsel sunumu değiştirir; tam metnin erişilebilir biçimde bulunmasını ve kullanıcıların devamını okuyabilmesini ayrıca tasarlayın. Özellikle başlık veya anlam için gerekli içerikte kesilme, ekran genişliği ve kullanıcı ayarlarıyla test edilmelidir.

Hangi durumlarda kullanılır?

  • Kart açıklamasını üç satırla sınırlı tutmak.
  • Liste görünümünde metin uzunluğunu tutarlı biçimde kısaltmak.

Nasıl kullanılır?

  1. Maksimum satır alanına 1 ile 20 arasında bir değer girin.
  2. Oluşan `.truncate` CSS bloğunu kopyalayın.
  3. Sınıfı örnek metne uygulayıp dar ekran, büyütülmüş yazı ve klavye/ekran okuyucu akışını kontrol edin.

Örnek

Girdi: Maksimum satır: 3

Çıktı: -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;

Kimler için?

  • Ön yüz geliştiricileri
  • Kart ve katalog tasarlayan UI ekipleri
  • Responsive metin görünümünü düzenleyen tasarımcılar

Gizlilik ve sınırlar

Satır sayısı tarayıcıda CSS metnine dönüştürülür; kullanıcı girdisi API'ye gönderilmez. Üretilen kod tam metin erişilebilirliği veya her tarayıcıda aynı görünümü garanti etmez.

Sık sorulan sorular

Line clamp metni gerçekten siler mi?

Hayır. CSS görünür kutuyu sınırlar; DOM'daki kaynak metin çoğunlukla durur. Bununla birlikte kullanıcıların tam metni bulabilmesini ve okuyabilmesini ürün tasarımınızda sağlayın.

Kaç satır seçebilirim?

Alan 1 ile 20 arasında değer alır. Tasarımınız için uygun sayıyı seçip farklı metin uzunluklarında önizleyin.

Ellipsis her tarayıcıda görünür mü?

Özellik uygulaması tarayıcı ve CSS bağlamına göre değişebilir. Kopyalanan kuralı hedef tarayıcı ve ekranlarda test edin.

Başlıklar için kullanmalı mıyım?

Anlamın bir kısmı kesilecekse dikkatli olun. Tam içeriği açma yolu veya görünür devamı sağlayın; kritik bilgi yalnızca kırpılmış alanda kalmasın.