İçeriği gizlemek ve talep üzerine ortaya çıkarmak için kullanabileceğiniz kullanışlı bir CSS tekniğini öğrenin.
Bir öğedeki metin miktarını sınırlamak, yaygın bir web tasarımı gereksinimidir. Sıklıkla, tam metni genişletmenize izin veren bir düğme ile üç veya dört satırlık bir alıntı içeren bir makale görürsünüz.
Bu tasarımı, CSS ve JavaScript'in bir kombinasyonunu kullanarak oluşturabilirsiniz. Ancak bunu yalnızca CSS kullanarak da yapabilirsiniz. Bir kutudaki metni sınırlamanın iki yolunu ve yalnızca CSS kullanarak dinamik bir genişletme düğmesini nasıl oluşturabileceğinizi keşfedin.
Web Kiti Tekniği
Boş bir klasör oluşturun ve içindeki iki dosyayı düzenleyin: index.html Ve stil.css. İçinde index.html dosya, bir HTML iskeleti oluşturun:
html>
<htmldil="tr"><KAFA>
<başlık>belgebaşlık>
<bağlantırel="stil sayfası"href="stil.css">
KAFA><vücut>
vücut>
html>
içinde bir bağlantı bölümüne, stil.css dosyası, o dosyaya eklediğiniz herhangi bir CSS'nin bu sayfaya uygulanmasını sağlar. Ardından, aşağıdaki HTML işaretlemesini etiketler index.html:
<bölümsınıf="kart grubu">
<maddesınıf="kart">
<h2>Madde 1h2><Psınıf="metin kesme">
300 kelimelik metin buraya gelecek
P><giriştip="onay kutusu"sınıf="genişlet-btn">
madde><maddesınıf="kart">
<h2>makale 2h2><Psınıf="metin kesme">
200 kelimelik metin buraya gelecek
P><giriştip="onay kutusu"sınıf="genişlet-btn">
madde><maddesınıf="kart">
<h2>Madde 1h2><Psınıf="metin kesme">
100 kelimelik metin buraya gelecek
P>
<giriştip="onay kutusu"sınıf="genişlet-btn">
madde>
bölüm>
Bu HTML'nin yapısı basittir, ancak yine de erişilebilirlik için semantik işaretleme. Bir bölüm öğesi, üç makale öğesi içerir. Her makale bir başlık, bir paragraf ve bir giriş öğesi içerir. Her makale bölümünün stilini bir karta dönüştürmek için CSS kullanacaksınız.
Bu arada, sayfanız şöyle görünecek:
Yukarıdaki görüntüden, her paragrafta farklı uzunluklarda metin görebilirsiniz. Birincide 300, ikincide 200 ve üçüncüde 100 kelime.
Sonraki adım, sayfaya CSS ekleyerek sayfayı şekillendirmeye başlamaktır. stil.css dosya. Belgedeki kenarlığı sıfırlayarak ve gövdeye beyaz bir arka plan rengi vererek başlayın:
*, *::önce, *::sonrasında {
kutu boyutlandırma: sınır kutusu;
}
vücut {
arka plan: #f3f3f3;
taşma: gizlenmiş;
}
Ardından, kart grubu sınıfına sahip öğeyi üç sütunlu bir ızgara kabına dönüştürün. Her makale bölümü bir sütunu kaplar:
.kart grubu {
görüntülemek: Kafes;
ızgara-şablon-sütunları: tekrarlamak(3, 1fr);
açıklık: .5rem;
hizalama öğeleri: esnek başlangıç;
}Her makale bölümünü beyaz arka plan rengi ve siyah, hafif yuvarlak kenarlıklı bir kart olarak biçimlendirin:
.kart {
arka plan: beyaz;
dolgu malzemesi: 1rem;
sınır: 1pikselsağlamsiyah;
sınır yarıçapı: .25em;
}Son olarak, bazı kenar boşlukları ekleyin:
h2, P {
marj: 0;
}
h2 {
kenar boşluğu: 1rem;
}
Dosyayı kaydedin ve tarayıcınızı kontrol edin. Sayfa, aşağıdaki resimde gösterilen sayfaya benzemelidir:
Bir sonraki adım, her metin için satır sayısını 3'e indirmektir. İşte bunun için CSS:
.cuttoff-metin {
--max-satırları: 3;
taşma: gizlenmiş;
görüntülemek: -webkit-kutusu;
-webkit-box-orient: dikey;
-webkit-line-clamp: var(--max-satırları);
}
Ayarlayarak başlayın bir CSS değişkeni, maksimum satırlar, 3'e ve taşan içeriği gizleme. Ardından ekranı şu şekilde ayarlayın: -webkit-kutusu ve hattı 3'e sabitleyin.
Aşağıdaki resim sonucu göstermektedir. Her kart, metnin üçüncü satırında bir elips görüntüler:
Bu tekniğin çıkarılması oldukça zor olabilir. Herhangi bir özelliği atlarsanız, o zaman her şey bozulur. Başka bir dezavantaj, dışında bir görüntüleme özelliği kullanamamanızdır. --webkit-kutusu. Örneğin, isteyebilirsiniz Grid veya Flexbox kullanın. Bu nedenlerden dolayı, aşağıdaki teknik daha iyidir.
Metindeki Satır Sayısını Sınırlandırmak İçin Daha Esnek Bir Yaklaşım
Bu teknik, webkit yaklaşımıyla aynı şeyi aynı sonuçlarla yapmanızı sağlar. Ancak en büyük fark, tonlarca esnekliğe sahip olmanızdır çünkü yüksekliği kendiniz ayarlıyorsunuz. Ayrıca, herhangi bir görüntüleme özelliğini veya tercih ettiğiniz herhangi bir stil seçeneğini kullanabilirsiniz.
Başlamak için CSS bloğunu şu şekilde değiştirin: .cutoff-metin Bununla:
.cuttoff-metin {
--max-satırları: 5;
--satır yüksekliği: 1.4;
yükseklik: kalk(var(--max-satırları) * 1em * var(--satır yüksekliği));
satır yüksekliği: var(--satır yüksekliği);
konum: akraba;
}Bir çizgi yüksekliği ayarlamak önemlidir, çünkü boyunuzu belirlerken bunu dikkate almanız gerekir. Yüksekliği elde etmek için satır yüksekliğini yazı tipi boyutunuz ve satır sayısıyla çarparsınız.
Ekleriz pozisyon: göreceli özelliği çünkü solma efekti eklemek için ona ihtiyacımız var. Efekti tamamlamak için aşağıdaki CSS'yi ekleyin:
.cuttoff-metin::önce {
içerik: "";
konum: mutlak;
yükseklik: kalk(2em * var(--satır yüksekliği));
Genişlik: 100%;
alt: 0;
işaretçi olayları: hiçbiri;
arka plan: doğrusal gradyan(ilealt, şeffaf, beyaz);
}Yukarıdaki CSS, her karttaki metnin son satırını bulanıklaştırır. kullanarak bir solma efekti elde edebilirsiniz. arka plan özellik ve bir gradyan. ayarlamanız gerekir işaretçi olayları ile hiçbiri öğenin seçilebilir olmadığından emin olmak için.
İşte sonuç:
Bu teknik, bir öncekiyle aynı sonucu elde etti (artı sondaki bulanıklık). Ancak diğer düzen ve tasarım türlerini kullanmak için daha fazla esneklik elde edersiniz.
Dinamik Genişlet ve Daralt Düğmesi Ekleme
Genişletme/daraltma düğmesi eklemek, kartları daha gerçekçi ve etkileşimli hale getirir. Bu kalıpla, içeriği tıklayarak genişletirsiniz. Genişletmek düğmesine basın, bundan sonra metin şu şekilde değişir: Yıkılmak. Böylece düğmenin metni, siz tıkladıkça "Genişlet" ve "Daralt" arasında değişir. Ayrıca, içeriğin geri kalanı her ilgili durumda görüntülenir ve gizlenir.
zaten tanımladınız giriş HTML'nizdeki öğe. Bu öğe, düğmeniz olarak hizmet edecektir. Bu girişi bir düğme olarak biçimlendirmek için, stil sayfanıza aşağıdaki CSS'yi ekleyin:
.expand-btn {
dış görünüş: hiçbiri;
sınır: 1pikselsağlamsiyah;
dolgu malzemesi: .5em;
sınır yarıçapı: .25em;
imleç: Işaretçi;
kenar boşluğu: 1rem;
}Düğmenin üzerine geldiğinizde, arka plan rengini değiştirmek istiyorsunuz:
.expand-btn:vurgulu {
arka plan rengi: #ccc;
}Şimdi giriş kontrol edildiğinde metni değiştirmek için CSS:
.expand-btn::önce {
içerik: "Genişletmek"
}
.expand-btn:kontrol::önce {
içerik: "Yıkılmak"
}
Şimdi düğmeyi/girişi tıkladığınızda, metin Genişletmek ile Yıkılmak. Ancak içeriğin kendisi henüz genişlemeyecek. Düğmeyi tıklattığınızda bunu yapmak için aşağıdaki CSS'yi ekleyin:
.cuttoff-metin:var(+.expand-btn:kontrol) {
yükseklik: Oto;
}Bu örnek, has() işlevini kullanır Öğeyi hedeflemek için CSS seçici. Bu kodla, kesme metni alanında işaretli bir genişletme düğmesi varsa, kartın yüksekliğinin Oto (bu onu genişletir).
İşte sonuç:
Öğrenilecek Diğer CSS İpuçları ve Püf Noktaları
Bu makale, CSS kullanarak bir kutudaki satır sayısını sınırlamak için iki farklı yöntem gösterdi. Tek bir JavaScript satırı yazmadan içeriği genişletmek/daraltmak için bir düğme bile ekledik.
Ancak CSS'de tonlarca başka ipucu ve püf noktası var. Bu ipuçları, performansa, okunabilirliğe veya erişilebilirliğe zarar vermeden istediğiniz düzenleri elde etmenin yaratıcı bir yolunu sunar.
