CSS ile satır sonlarını önleyin

— bir React bileşeninde css hilesi🧚

Son zamanlarda ilginç bir sorunla karşılaştım, diyelim ki, aşağıdaki gibi temel React kodunu kullanarak görüntülenecek bazı liste öğeleri var 👇

✨ Bu öğelerin aşağıdaki sonuç gibi yan yana ( satır içi ve elbette satır sonu olmadan ) olması gerektiğine dikkat edin👇

Basit bir css yazdım: ✏️

Ve Sonuç 💥

Bkz satır sonları ? Yeterince çirkin…

🤞 İşte benim basit çözümüm geliyor:

Bu kadar! 🌸

white-spaceBir elemanın içine beyaz boşluk nasıl işleneceğini CSS özelliği setleri, o, boşluğu kapatır, ancak sarma izin vermez.

overflowCSS stenografi nitelik bir elemanın taşma için istenilen davranışı ayarlar - yani bir elemanın içeriği bağlamı biçimlendirme kendi bloğunda sığmayacak kadar büyük olduğunda - her iki yönde.

text-overflowCSS özellik setleri gizli taşma içerik kullanıcılar işareti nasıl. Kırpılabilir, üç nokta (' …') görüntüleyebilir veya özel bir dize görüntüleyebilir.

Bu hızlı ve basit bir css numarasıydı, umarım beğenirsiniz! 💫

Okuduğunuz için teşekkürler!