Bu makale metni bir Tailwind'e sıkıştırma prosedürünü sağlayacaktır.
Metni Belirli Sayıda Satıra Nasıl Sabitleyebilirim?
Tailwind'deki satır sıkıştırma sınıfı, bir bloktaki metin içeriğini belirli sayıda satırla sınırlar. Bunu yaparak metin bloğu, sınıfta belirtilen satır sayısından sonra metni gizleyecektir. Bir web sayfasında kullanıcıya bazı metin bilgilerinin bulunduğunu göstermek veya web sayfasındaki doygunluğu önlemek için tüm gereksiz metinleri gizlemek için kullanılabilir.
Sözdizimi
Aşağıda verilen sözdizimi “ sınıf ” çizgi sıkıştırma uygulamak için bir öğenin niteliği:
Yukarıda tanımlanan söz diziminde kullanıcı “'den gelen sayıları kullanabilir. 1'den 6'ya ” varsayılan hat sıkıştırma sınıflarını kullanmak için. Örneğin, “ hat kelepçesi-1 ” sınıfı metin içeriğinin bir satırı aşmasına izin vermeyecektir.
Bazı örnekler üzerinden “line-camp” sınıfı kavramını anlayalım.
Örnek 1: İçeriği Belirli Bir Satır Sayısıyla Sınırlamak için Hat Kelepçe Sınıfını Kullanma
Aşağıda yapıldığı gibi Tailwind'deki line-clamping sınıfını kullanarak metin içeriğini üç satırla sınırlayalım:
< div sınıf = 'yuvarlak-lg flex hizalama-merkezli bg-slate-200 m-5 p-4' >
< P sınıf = 'hat kelepçesi-3 w-72' > Bu örnek bir paragraftır. Yalnızca 3 satır görünür olacaktır. Bundan sonraki tüm içerik gizlenecek. Bunun nedeni Tailwind'deki hat sıkıştırma sınıfından kaynaklanmaktadır. < / P >
< / div >
Yukarıdaki kodun açıklaması şu şekildedir:
- A ' div ” elemanı, “ kullanılarak köşeleri yuvarlatılmış olarak oluşturulur. yuvarlak-lg ' sınıf. Kenar boşluğunu ve dolguyu “” kullanarak sağlar. m-{sayı} ” & “ p-{sayı} ” sınıfları.
- Daha sonra div elemanındaki eleman “ kullanılarak ortalanır. iki yana yasla-merkez ” sınıfı ve “ esnek ” sınıfı, div'in alt öğesini içerecek bir kap oluşturur.
- “ bg-{renk}-{sayı} ” sınıfı div öğesinin arka plan rengini ayarlar.
- A ' Metin içeriğini içeren ” etiketi oluşturulur. “ kullanılarak sabit genişlik sağlanır. w-{sayı} ' sınıf.
- Son olarak “ metin içeriği P ” öğesi, “ kullanılarak üç satırla sınırlıdır hat kelepçesi-3 ' sınıf.
Çıktı
Çıktıda, belirtilen üç satırlık sınırı aşan metin içeriğinin gizlendiği görülmektedir:
Örnek 2: Arka Rüzgarda Varsayılan Durumlarla Hat Kelepçe Sınıfını Kullanma
Tailwind, tasarım düzenlerini daha dinamik hale getirmek için kullanılabilecek bir öğe için çeşitli varsayılan durumlar sağlar. Geliştirici, bu duruma ulaşıldığında öğeye belirtilen tasarım özelliğini sağlamak için bu durumlara sahip herhangi bir Tailwind sınıfını kullanabilir. Benzer şekilde, 'line-clamp' sınıfı da bu varsayılan Tailwind durumlarıyla birlikte kullanılabilir.
Tailwind'de “line-clamp” sınıfını bir durumla kullanmanın sözdizimi aşağıda verilmiştir:
{ durum } : hat kelepçesi { sayı }Aşağıda açıklanan üç varsayılan durum vardır:
- üzerine gelin: Kullanıcı fare imlecini öğenin üzerine getirdiğinde öğenin durumudur.
- odak: Elementin odakta olduğu durumdur. Örneğin kullanıcı “tab” tuşuna basarak öğeye gider.
- aktif: Öğenin kullanıcı tarafından etkinleştirildiği durum.
Aşağıdaki gösteride her şey önceki örnekle aynıdır. Tek fark, hat sıkıştırma sınıfının “ vurgulu ' durum:
< div sınıf = 'yuvarlak-lg flex hizalama-merkezli bg-slate-200 m-5 p-4' >< P sınıf = ' vurgulu: hat kelepçesi-3 w-72' > Bu örnek bir paragraftır. Yalnızca 3 satır görünür olacaktır. Bundan sonraki tüm içerik gizlenecek. Bunun nedeni Tailwind'deki lin sıkıştırma sınıfından kaynaklanmaktadır. < / P >
< / div >
Şunu unutmayın: “ ” sınıfı “ tarafından sağlanır vurgulu: hat kelepçesi-3 Kullanıcı fare imlecini içerik kutusunun üzerine getirdiğinde metin içeriğini üç satırla sınırlandıracak olan 'sınıfı.
Çıktı
Aşağıdaki çıktıda fare imleci bloğun üzerine geldiğinde satır sıkıştırma özelliğinin uygulandığı görülmektedir:
Örnek 3: Hat Kelepçesi Sınıfını Kesme Noktalarıyla Kullanma
Kesme noktaları, Tailwind'de kullanıcıların duyarlı bir tasarım düzeni oluşturmasına yardımcı olan medya sorgularıdır. Tailwind, önceden tanımlanmış minimum genişliklere sahip beş varsayılan kesme noktası sağlar. Geliştirici ayrıca bu kesme noktalarıyla hat sıkıştırma sınıfını da kullanabilir.
Kesme noktalarına sahip bir satır sıkıştırma sınıfı kullanmanın sözdizimi aşağıdaki gibidir:
{ kesme noktası önekleri } : hat kelepçesi { sayı }Yukarıdaki sözdiziminde bahsedilen “kesme noktası önekleri” aşağıdaki gibidir:
- sm: Bu kesme noktasının minimum genişliği 640 pikseldir.
- MD: Bu kesme noktasının minimum genişliği 768 pikseldir.
- lg: Bu kesme noktasının minimum genişliği 1024 pikseldir.
- xl: Bu kesme noktasının minimum genişliği 1280 pikseldir.
- 2xl: Bu kesme noktasının minimum genişliği 1536 pikseldir.
Aşağıda verilen gösteride, “ P ” elemanı farklı kesme noktalarında farklı hat kelepçe sınıflarıyla sağlanır. Bu, yeni kesme noktasına ulaşıldığında metin bloğunun satır sıkıştırma özelliğini değiştirecektir:
< div sınıf = 'yuvarlak-lg flex hizalama-merkezli bg-slate-200 m-5 p-4' >< P sınıf = ' hat-clamp-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > Bu örnek bir paragraftır. Yalnızca 3 satır görünür olacaktır. Bundan sonraki tüm içerik gizlenecek. Bunun nedeni Tailwind'deki lin sıkıştırma sınıfından kaynaklanmaktadır. < / P >
< / div >
p elemanı varsayılan olarak “line-clamp-1” sınıfıyla sağlanır. Ancak “p” elemanındaki metin içeriği “” için tek satırla sınırlı olacaktır. sm ” kesme noktası, “ için iki satır MD ” kesme noktası ve “ için üç satır lg ” kesme noktası.
Çıktı
Çıktıdan, metin bloğunun line-clamp özelliğinin ekran boyutu değiştikçe değiştiği açıktır:
Tailwind'de metni belirli sayıda satıra sıkıştırma prosedürünü gösterdik.
Çözüm
Tailwind'deki satır sıkıştırma sınıfı, bir öğenin metin içeriğini belirtilen satır sayısıyla sınırlar. “lin-clamp-{number}” sınıfı, metni sınırlı satırlara sıkıştırmak için bir sözdizimi olarak kullanılır. Hat kelepçe sınıfı, Tailwind'deki önceden tanımlanmış kesme noktaları ve durum değişkenleriyle birlikte kullanılabilir. Bu makale, metni belirli sayıda satıra sıkıştırma prosedürünü sağlamıştır.