Kısa çizginin(-) tanımına internette baktığımızda kullanım alanlarının başında ilk sırada

“Satır sonunda, yer kalmadığı için yarım kalan kelimelerin bölünmüş olduğunu, yani devamının altta olduğunu göstermek için satır sonunda kullanılır. Bu görevde kullanılınca birleştirme çizgisi denir.”

Bilgisi yer alır. Bu işi web mecrasında yapmak için CSS3 ile gelen hyphens(kısa çizgi) özelliği kullanılır. Şimdi bu makalede bu özelliği inceleyeceğiz.

CSS kısa çizgi özelliği bir satıra sığmayan kelimenin nasıl bölüneceğini belirler. Bu bölme işini HTML’de tanımlana lang özniteliğinde belirtilen dile göre yapar.

Yapısı: hyphens: <deger>
Aldığı Değerler: none | manual | auto
Başlangıç Değeri: manual
Uygulanabilen Elementler: Tüm elementler
Kalıtsallık: var

Değerlerini inceleyelim.

  • none: Satır sonuna sığmayan kelime tire ile ayrılmaz. Sadece boşluk olan bölümlerden satır başı yaptırılır.
  • manual: Kelimeler satıra sığmadığında sadece kelime içinde tire geçiyorsa ise tireli olan kısımdan kesilir. &shy; karakterini tire konacak yere koymamız gerekiyor. Normalde gözükmüyor ama kelime kesildiğinde tire gözüküyor.
  • auto: Kelimeler satıra sığmadığında tarayıcı tarafından otomatik olarak HTML’de belirtilen dile göre bölünür.

Bir örnek yapalım.

kesik çizgi

Firefox’da denedim çalışıyor. Gayetde güzel çalışıyor. Unutulmaması gereken şey dil tanımının yapılması. Chrome’da auto çalışmıyor.

Tarayıcı Desteği

Chrome explorer Firefox
29+ (-webkit; auto hariç) 10+ (-ms) 6+ (-moz)

Mobil Tarayıcılar

Android Mobil Safari Chrome
desteklemiyor 4.2 (-webkit) desteklemiyor

Kaynaklar

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.