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;
}