Css ile tek satırlı metnin sonuna (3) üç nokta koyma

Css ile tek satırlı metnin sonuna (3) üç nokta koyma

Tek satırda belli bir genişliğe sahip bir metnin taşan kısmını gizledikten sonra satırın sonuna üç nokta mı koymak istiyorsunuz? Bu yazımda sizlere sadece css kodlaması ile bunun nasıl yapılabileceğini anlatacağım.

Konuya geçmeden önce her html,css,javascrip veya php kodlamasında kullanmış olduğum html snippets yapısını yani kod parçacığını paylaşmak istiyorum.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Title</title>
   <meta name="author" content="Musa Yazlık">
   <meta name="description" content="">
   <meta name="keywords" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta charset="UTF-8">

   <style>

   </style>
</head>

<body>

</body>

</html>

Şimdi ile konumuza geri dönersek her işlemi sizlere adım adım yaparak anlatmak istiyorum.

1-) Body Alanına Bir Yazı Eklenmesi

Body alanında bir p etiketi oluşturalım. Ardından Lorem20 yazdıktan sonra tab tuşuna basınız otomatik olarak p etiketinin içerisine bir metin eklenecek. Eğer bu komut sizde çalışmıyor ise bir metin kopyalayıp p etiketi içerisine ekleyebilirsiniz.

<body>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure autem quae blanditiis obcaecati saepe numquam esse, perferendis molestias eveniet accusantium?</p>

</body>

2-) Style Özelleştirmesi

Bu adımda kullanacağımız css özelliklerin küçükte olsa bir tanımını sizleri ile paylaşacağım. Tek satırda olan metnin sonuna üç nokta koyabilmemiz için 4 temel css komutu kullanacağız.

1-) width : Seçilen alanın genişliğini ayarlamamızı sağlar.

2-) text-overflow(ellipsis): Kırpılan kısmın kullanıcıya üç nokta geri bildirimi için kullanılır.

3-) white-space(nowrap): Verilen metni tek satıra indirmek için kullanılır.

4-) overflow(hidden): Taşan kısmı gizlemek için kullanılır.

Şimdi ise oluşturduğumuz metin için bu css özelliklerini verelim.

3-) Son Dokunuş(üç nokta)

Şimdi ise oluşturduğumuz p etiketine bu özellikleri verelim.

css tek satir uc nokta
Tek satır sonu üç nokta

Bu kodları resim olarak yükledim çünkü elle yazıp el alışkanlığı kazanmanızı istiyorum. Bolca yazarak çalışmanızı öneririm.

Şimdi ise kodlamanın çıktısına bakalım.

tek satir uc nokta
Çıktı

Gözüktüğü üzere taşan kısım kesildikten sonra satırın sonuna üç nokta eklendi. Evet bu yazımda sizlere css ile tek satır olan metnin sonuna nasıl üç nokta koyulu onu anlattım. Umarım faydası olmuştur. Bir sonraki blog yazımda görüşmek üzere sağlıcakla kalın…

Lütfen bir yorum bırakınız