Elipsis ile Dizeyi Kes - CSS Hileleri

Anonim

Aşağıdakilerin tümü gereklidir, bu nedenle metin, taşmanın gizlendiği bir kutunun dışına taşan tek bir düz çizgi halinde olmalıdır.

.truncate ( width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; )

CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen Basic Overflow Ellipsis'e bakın.

Burada kullanılan sabit genişliğe dikkat edin. İşin özü, elemanın bir tür belirli genişliğe ihtiyaç duymasıdır, bu da flexbox ile özellikle dikkatli olmanız gerekir:

CodePen'de Chris Coyier (@chriscoyier) tarafından flexbox hakkında bilmeniz gereken Pen Thing'e bakın.

Belirli sayıda satıra kısaltmayı mı arıyorsunuz?