CSS'de Metin (Text) Efektleri

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