Hoşgeldiniz
Okuma Moduna Geç
06 Haziran 2018 - 11:52
CSS ile Birden Fazla Satırı Sınırlandırmak

CSS her geçen gün kendini güncellemeye devam ederken, gelen özelliklerden bir diğeri de birden fazla satırı istediğimiz noktadan itibaren gizlememize olanak sağlayan line-clamp özelliğidir.

Not Daha önce tek satırı nasıl gizleyeceğimize dair yazıma buraya tıklayarak ulaşabilirsiniz.

text-overflow'dan Farkı Nedir?

text-overflow ile tek satırı kesip sonuna üç nokta ekleyebiliyoruz. Fakat satır sayısı birden fazla olduğunda text-overflow ne yazık ki derdimize derman olamıyor.

line-clamp

line-clamp, bir metin üzerinden belirtilen miktarda satırdan sonrasını kesmeye yarar.

Söz Dizimi

.merttopuz {
	line-clamp: [none, <Tam Sayı Değeri>];
}

none: Metin üzerinde herhangi bir kesme işlemi yapmaz ve tüm metni gösterir.

Tam Sayı Değeri: Girilen tam sayı değerindeki satırın sonuna üç nokta ekler ve sonrasını keser.

Kullanımı

line-clamp yapısı oluşturulurken ekstra yardımcılara ihtiyaç duymaktadır. Bunun için temel yapımızı oluşturmamız gerekirse şöyle bir yapıdan söz edebiliriz;

.merttopuz {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	
	width: 100px;
}

ÖRNEK

Metnimiz: Merttopuz.com için hazırlamış olduğum son içerik "CSS ile Birden Fazla Satırı Sınırlandırmak" başlığına sahiptir ve 6 Haziran 2018 tarihinde yazılmıştır.

<div class="merttopuz">Merttopuz.com için hazırlamış olduğum son içerik "CSS ile Birden Fazla Satırı Sınırlandırmak" başlığına sahiptir ve 6 Haziran 2018 tarihinde yazılmıştır.</div>

Css Alanımız 

.merttopuz {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;

	width: 250px;
}

ÇIKTI

Tarayıcı Desteği

Makalenin yazıldığı tarih itibari ile;

Destekliyor: Chrome, Opera, Safari, Chrome Mobile, Android, Android Chrome, Opera Mobile, iOS Safari

Desteklemiyor: Firefox, Edge, IE, Opera Mini, Android Firefox

Sponsorlu Bağlantı
Yorumlar
Hakkı Cengiz
09 Kasım 201816:36
Bu konuda vakti zamanında bende araştırmıştım codepen'de de çok güzel bi örneği var Pure CSS multiline text with ellipsis adında -ki muhtemelen görmüşsündür (:
Eline sağlık
142
Cevapla
1
Yorumu Beğen
0
Yorumu Beğenme
Mert Topuz
11 Kasım 201815:01
Evet bu konu için araştırma yaparken karşıma çıkmıştı :) Teşekkürler değerli yorumun için :)
0
Yorumu Beğen
0
Yorumu Beğenme
Bir Yorum da Sen Bırak
Adınız ve Soyadınız
Mail Adresiniz
Mail adresinizi yalnızca yönetici görüntüleyebilir.
Web Siteniz
Yorumunuz
Yorumu Gönder