BLOG

CSS ile Alt Satıra Geçmeyi Engelleme
24 Şubat 2019, 18.17

CSS ile Alt Satıra Geçmeyi Engelleme

Merhaba arkadaşlar, bu yazımızda CSS'i kullanarak belirli bir alandaki metnin alt satıra geçmesini engellemeyi, taşan kısımların gizlenmesini ve metnin sonuna üç nokta(...) koyma işleminin nasıl yapıldığını öğreneceğiz. Bu işlemler için CSS'in overflow, white-space ve text-overflow özelliklerini kullacanağız.
Kullanıma geçecek olursak;

.alan{
  width: 200px; // Alanın genişliğini belirleme
  overflow: hidden; // Alanın dışına taşanları gizle
  white-space: nowrap; // Alt satıra geçmeyi engelle
  text-overflow: ellipsis; // Uzunsa sonuna üç nokta koy
}

Kodumuzun Çıktısı:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

 

Hepinize keyifli kodlamalar :)

YORUM YAPMAK İSTER MİSİNİZ?

Tüm alanların doldurulması zorunludur. Email adresiniz yayınlanmayacaktır.


İSMİNİZ
EMAİL ADRESİNİZ
YORUMUNUZ
YORUMU GÖNDER
  • Vedat Emre Gündüz
    14 Şubat 2021, 20.13Cevap Yaz
    Sağ olun gayet basit ve güzel bir anlatım olmuş.
    İSMİNİZ
    EMAİL ADRESİNİZ
    YORUMUNUZ
    YORUMU GÖNDER
    KAPAT
  • Onur
    08 Nisan 2021, 18.53Cevap Yaz
    Teşekkür Ederim!
    İSMİNİZ
    EMAİL ADRESİNİZ
    YORUMUNUZ
    YORUMU GÖNDER
    KAPAT
  • Özhan Mengücek
    23 Nisan 2022, 12.53Cevap Yaz
    @Vedat Emre Gündüz Beğenmenize sevindim, keyifli kodlamalar :)
    İSMİNİZ
    EMAİL ADRESİNİZ
    YORUMUNUZ
    YORUMU GÖNDER
    KAPAT
  • Özhan Mengücek
    23 Nisan 2022, 12.53Cevap Yaz
    @Onur Rica ederim, keyifli kodlamalar :)
    İSMİNİZ
    EMAİL ADRESİNİZ
    YORUMUNUZ
    YORUMU GÖNDER
    KAPAT
  • egehan
    19 Mayıs 2022, 18.11Cevap Yaz
    bu 3 noktanın üzerine geldiğimizde yazının devamını görmemizi sağlayan bir açılır pencereyi nasıl yapabiliriz
    İSMİNİZ
    EMAİL ADRESİNİZ
    YORUMUNUZ
    YORUMU GÖNDER
    KAPAT
  • Özhan Mengücek
    20 Mayıs 2022, 12.31Cevap Yaz
    @egehan Merhaba Egehan. Css ile belirtmiş olduğun işlemi yapamayız ancak javascript desteğiyle bu söylediğini yapmak mümkün. Bootstrap popovers ve tooltips kullanabilirsin. Faydalı olabileceğini düşündüğüm linkleri iletiyorum: • https://mdbootstrap.com/docs/standard/components/popovers/ • https://mdbootstrap.com/docs/standard/components/tooltips/
    İSMİNİZ
    EMAİL ADRESİNİZ
    YORUMUNUZ
    YORUMU GÖNDER
    KAPAT