CSS ile yazının tek satırda kalmasını sağlamak

Bu soru 1 kez yanıtlandı.

• bill gates

  1 Temmuz 2019 11:10

  39

  Bir yazıyı tek satır olmaya zorlayan CSS özelliği white-space: nowrap 'dir. örneğin:

  <style>
    .teksatir {
  white-space: nowrap;
  }
  
  </style>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  <br><br><br>
  <span class="teksatir">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  

  Çıktısında aşağıdaki lorem ipsum'un ne kadar uzun olursa olsun tek satırda kalacağını kontrol edebilirsiniz.

  Gelelim maksimum uzunluğa. Bir alanın uzunluğunu belirlemek için span yerine div kullanmak daha doğru bir kullanım şeklidir. Bunun için yukarıdaki örneği aşağıdaki gibi güncelliyorum ve 200 px uzunluktaki bir alandan dışarı taşmaması için width:200px ve overflow:hidden özelliklerini ekliyorrum. Son olarak da taşan kısım olduğunu göstermesi için taşan bölgede yan yana 3 nokta koyabilmek için text-overflow:ellipsis özelliği ekliyorum.

  <style>
    .teksatir {
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  text-overflow:ellipsis
  }
  
  </style>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  <br><br><br>
  <div class="teksatir">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  

  Çıktısı:

  

  Her iki metin de aynı uzunluğa sahip olmasına rağmen aşağıdaki yazının hem tek satırda kalması sağlandı, hem uzunluğu tanımlandı ve taşması engellendi, hem de sonuna üç nokta kondu. Böylece belki hover efekti ile yazının tamamının görünmesi sağlanabilir ve kullanıcı deneyimi açısından güzel bir tasarım yapılmış olabilir.