Bu makale şunları gösterecek:
Tailwind'de “overflow-hidden” Nasıl Kullanılır?
bu “taşma-gizli” class, o öğenin boyutunu aşan içeriği gizler veya kırpar. Tailwind'de 'overflow-hidden' özelliğini kullanmak için bir HTML programı oluşturun ve belirli öğeyle 'overflow-hidden' yardımcı sınıfını uygulayın.
Sözdizimi
<öğe sınıf = 'taşma-gizli ...' > ... < / eleman>
Örnek
Bu örnekte uygulayacağımız “taşma-gizli” taşma içeriğini gizlemek için yardımcı programı
< vücut >
< div sınıf = 'taşma gizli bg-mor-300 p-4 mx-16 mt-5 h-32 metin-yasla' >
Tailwind CSS, çeşitli 'taşma' gibi yardımcı programlar 'taşma-otomatik' , 'taşma-kaydırma' , 'taşma-gizli' ,
'taşma-görünür' vb. Bu yardımcı programlar, belirli bir öğenin içerik aşan
konteyner boyut . Her yardımcı program benzersiz işlevsellik sunar, ancak nihai hedefleri aynı kalır, yani kontrol etmek
taşma davranışı seçilmiş eleman.
< / div >
< / vücut >
Burada:
- “taşma-gizli” class, kabının boyutunu aşan içeriği gizlemek için kullanılır.
- “bg-mor-300” class, mor rengi kabın arka planına ayarlar.
- “s-4” class, kabın her tarafında 4 birim dolgu ayarlar.
- “mx-16” class, kabın x eksenindeki 16 birimlik marjı uygular.
- “mt-5” class, 5 birim kenar boşluğunu kabın üstüne uygular.
- “h-32” class, kabın yüksekliğini 32 birime ayarlar.
- “metni iki yana yasla” class, kapsayıcı içindeki içeriğin metnini yaslar.
Çıktı
Yukarıdaki çıktıda, 'overflow-hidden' özelliğinin başarıyla uygulandığını gösteren taşan içerik görülemez.
Tailwind'de “overflow-visible” Nasıl Kullanılır?
bu “taşma-görünür” class, fazla aşan içeriğin görünür olmasını sağlar. Tailwind'de 'overflow-visible' özelliğini kullanmak için bir HTML yapısı oluşturun ve belirli öğeyle 'overflow-visible' yardımcı sınıfını uygulayın.
Sözdizimi
<öğe sınıf = 'taşma-görünür ...' >...< / eleman>Örnek
Bu örnekte uygulayacağımız “taşma-görünür” taşma içeriğini göstermek içinkabına yardımcı program: < vücut >
< div sınıf = 'taşma-görünür bg-mor-300 p-4 mx-16 mt-5 h-32 metin-yaslama' >
Tailwind CSS, çeşitli 'taşma' gibi yardımcı programlar 'taşma-otomatik' , 'taşma-kaydırma' , 'taşma-gizli' ,
'taşma-görünür' vb. Bu yardımcı programlar, belirli bir öğenin içerik aşan
konteyner boyut . Her yardımcı program benzersiz işlevsellik sunar, ancak nihai hedefleri aynı kalır, yani kontrol etmek
taşma davranışı seçilmiş eleman.
< / div >
< / vücut >Burada, yukarıdaki kod parçacığında, “taşma-görünür” class, kabın boyutunu aşan içeriği göstermek için kullanılır.
Çıktı
Yukarıdaki çıktıya göre “overflow-visible” yardımcı programı başarıyla uygulanmıştır.
Çözüm
Tailwind'de 'taşma-gizli' ve 'taşma-görünür' özelliklerini kullanmak için “taşma-gizli” Ve “taşma-görünür” HTML programında istenen öğelerle yardımcı program sınıfları. 'overflow-hidden' yardımcı programı taşan içeriği gizlerken, 'overflow-visible' belirtilen öğenin taşan içeriğini gösterir. Bu makale, Tailwind'de 'taşma-gizli' ve 'taşma-görünür' yardımcı programlarını kullanma yöntemini örneklemiştir.