Daha önceki yazılarda taşan yazıları alt satıra geçirmek için yapılması gerekenleri yazmıştık.
Bu yazıda taşan yazı mevcut div içine sığmadığında ekrana getirebileceğiniz 3 nokta sembolünü nasıl yapacağınızı göstereceğim.
Taşan yazıya 3 nokta eklemek için kullanacağımız text-overflow: ellipsis; özelliği olmadan aşağıdaki örneği oluşturuyorum.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <style> .kutu{ width: 200px; border:1px solid red; } </style> <html> <body> <div class="kutu"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque architecto aperiam sunt tempora eius mollitia qui possimus. Aut deleniti perspiciatis voluptate harum incidunt quibusdam in ut adipisci, accusamus error impedit! </div> </body> </html> |
Ekran çıktısı şu şekilde olacaktır.
text-overflow: ellipsis özelliği kullanma
Yukarıdaki örneğe text-overflow: ellipsis; özelliğini ekliyoruz.
Not: text-overflow özelliği, bir taşmanın gerçekleşmesini zorlamaz. Metnin kapsayıcısını taşmasını sağlamak için diğer CSS özelliklerini ayarlamanız gerekir: overflow and white-space.
Örneğin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <style> .kutu{ width: 200px; border:1px solid red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> <html> <body> <div class="kutu"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque architecto aperiam sunt tempora eius mollitia qui possimus. Aut deleniti perspiciatis voluptate harum incidunt quibusdam in ut adipisci, accusamus error impedit! </div> </body> </html> |
Ekran Çıktı:
1 Yorum