CSS Dersleri 39 - Metin (Text) Efektleri

CSS Dersleri 39 - Metin (Text) Efektleri


Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de Metin (Text) Efektlerini öğreneceğiz.

CSS'de metinlere ait özellikleri daha da derinleştirebileceğimiz özelliklere göz atacağız. 

CSS text-overflow kullanımı 

CSS'de text-overflow özelliği, taşan içeriğin kullanıcıya nasıl gösterileceğini belirtir. Ekrana sığmayan yazıların sonuna üç nokta koyma imkanı sağlar ve genellikle bu özellik için kullanılır.

p.test1 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

CSS word-wrap kullanımı 

CSS'de word-wrap özelliği, uzun kelimelerin bölünebilmesini ve bir sonraki satıra geçebilmesini sağlar. Mantıken  bu özellik ile metini ortadan bölmüş oluruz, ama metni kaydırmayı zorlamak istersek bu özelliği kullanmalıyız.

p {
  word-wrap: break-word;
}

CSS word-break kullanımı 

CSS'de word-break özelliği, satır atlama kurallarını belirtiğimiz bir özelliktir.

p.test1 {
  word-break: keep-all;
}

p.test2 {
  word-break: break-all;
}

CSS writing-mode kullanımı

CSS'de writing-mode özelliği, metin satırlarının yatay mı yoksa dikey mi gösterileceğini belirtir.

p.test1 {
  writing-mode: horizontal-tb;
}

span.test2 {
  writing-mode: vertical-rl;
}

p.test2 {
  writing-mode: vertical-rl;
}

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla