Text-Overflow Özelliği
Html elemanları içerisindeki metinlerin sığmadıklarında gizlenmesi ya da görünmesi sağlanabilmekteydi. Css3 ile gelen text-overflow özelliği sayesinde sığmayan kısımlar üç nokta (...) konarak da otomatik olarak gizlenebilmektedir.
Text-overflow kullanımına örnekler:
Bu kutu için text-overflow özelliği kullanılmadı. Yani standart görünüm.
Uzun metinlerin taşma durumunda nasıl davranacakları belirlenebilir.
Bu kutu için white-space: nowrap; özelliği ile metnin alta geçmemesi sağlandı. text-overflow: clip; özelliği ile taşan kısımlar gizlendi.
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
Uzun metinlerin taşma durumunda nasıl davranacakları belirlenebilir.
Bu kutu içinse text-overflow: ellipsis; özelliği sayesinde taşan kısımlar üç nokta (...) konarak gizlendi.
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Uzun metinlerin taşma durumunda nasıl davranacakları belirlenebilir.
Word-Wrap Özelliği
Bazen bir kelime veya ifade çok uzun olduğu ve boşluk da içermediği için bölünemeyip, içinde bulunduğu bölgenin dışına taşabilmektedir. Word-wrap özelliği kullanılarak kelimenin sığmayan kısmının alttan devam etmesi sağlanabilir.
Örnek:
Bu kutu için word-wrap özelliği kullanılmadı. Uzunluğu nedeniyle kutuya sığmayan kelime dışa taştı.
Uzun kelimelerin abcçdefgğhıijklmnoöprsştuüvyzabcçdefg gibi, taşma durumunda nasıl davranacakları belirlenebilir.
Burada ise word-wrap: break-word; özelliği sayesinde sığmayan kelime bölünerek alttan devam etmesi sağlandı.
#kutu1{
word-wrap: break-word;
}
Uzun kelimelerin abcçdefgğhıijklmnoöprsştuüvyzabcçdefg gibi, taşma durumunda nasıl davranacakları belirlenebilir.
Word-Break Özelliği
Sadece sığmayan kelimelerin değil, tüm kelimelerin orta yerlerinden bölünerek alta geçmesini istersek word-break: break-all şeklinde kullanabiliriz. Keep-all değeri ise tire işaretlerinden alta geçilmesini sağlar.
Bu kutu için word-break: keep-all; yapılarak tire işaretinden kelimenin bölünebilmesi sağlanmıştır.
Uzun kelimelerin abcçdefgğhıijklmnoöprsştuüvy-zabcçdefg gibi, taşma durumunda nasıl davranacakları belirlenebilir.
Bu kutu için word-break: break-all; özelliği kullanılarak tüm kelimelerin satır sonunda ortasından bölünmeleri sağlanmıştır.
#kutu3{
word-break: break-all;
}
Tüm kelimelerin taşma durumunda nasıl davranacakları belirlenebilir.
css metin kaydırma, uzun kelimelerin taşmamasını sağlama, uzun kelimeleri bölme alta geçme, sığmayan kelimelerin alta geçmesini sağlama
KONU İLE İLGİLİ ÖRNEKLER
Bu konu ile ilgili örnek bulunmamaktadır.
15622 kez okundu.