Text-overflow: Ellipsis Dianggap Berbahaya

Diterbitkan Ulang Oleh Plato

Followers: 0

Ada beberapa kasus penggunaan yang sah untuk teknik ini. Misalnya, Anda mungkin memiliki tabel dengan judul dan deskripsi. Untuk menghemat lebih banyak ruang untuk judul, Anda membatasi deskripsi ke satu baris di area pandang kecil ke satu baris dan Anda mengulangi deskripsi di halaman detail untuk item ini.

Namun, saya sering melihatnya digunakan pada item seperti tombol atau bahkan label formulir untuk membuatnya terlihat lebih bagus(?) atau saat menyelaraskannya secara vertikal. Tapi begitu Anda mengubah viewport atau mengubah ukuran teks, akhir teks menghilang.

Saya pikir "... jika digunakan dalam situasi tertentu" termasuk di sana, tetapi itu pasti membuat judul posting blog yang lebih baik tanpa itu. Seperti yang dikatakan Eric, ada kasus penggunaan yang sah untuk memotong teks. Mungkin hanya beberapa, tapi tetap sah.

Tujuan utamanya adalah untuk mencegah "kehilangan" data, sesuatu itu pasti bisa terjadi di CSS. Teks yang secara tidak sengaja memenuhi wadah akan hilang dalam arti tidak ada di sana. Dan jika teks itu tidak ada, pengguna akan melewatkannya, bahkan jika itu adalah ajakan bertindak terbaik dan paling baik yang pernah dipublikasikan ke web.

Eric menunjukkan bahwa tidak ada cara untuk membuat teks terpotong oleh text-overflow: ellipsis terlihat. Setelah hilang, hilang (meskipun pembaca layar tampaknya mengumumkannya). Ini praktis kehilangan data. Anda mungkin baik-baik saja dengan itu. Itu keren selama Anda tahu apa yang terjadi dan itu dimaksudkan.

Tapi inilah yang Eric katakan yang membuat saya ingin membagikan ini:

Jangan membatasi konten agar sesuai dengan desain Anda, buat CSS Anda fleksibel untuk menangani kata-kata yang lebih panjang dengan anggun.

Kamu lagi mungkin ingin menyesuaikan konten dengan desain. Tapi saya mungkin akan berpendapat, seperti Eric, bahwa desain harus beradaptasi dengan konten daripada sebaliknya. Saya mengalami kesulitan mengingat situasi apa pun di mana teks pada halaman tidak penting atau tanpa tujuan sejauh saya akan dengan tenang memotong jika pada titik sewenang-wenang yang ditentukan oleh properti CSS. Mungkin arsip posting blog di mana setiap posting menunjukkan kutipan konten posting sebelum dipotong, tapi itu bukan kasus penggunaan untuk text-overflow: ellipse.

CSS memiliki alat untuk membuat desain fleksibel yang memperhitungkan panjang teks yang bervariasi. Jadi mungkin berbuat salah di sisi menulis CSS defensif… CSS yang mengantisipasi masalah dan mengetahui cara menangani berbagai skenario konten dengan baik. text-overflow: ellipsis mungkin menjadi bagian dari gudang CSS Anda untuk itu. Tapi mungkin juga membuang bayi dengan air mandi. Patut ditanyakan apakah kehilangan data itu sepadan dengan biaya apa yang seharusnya dilakukan konten itu sebelum memberinya potongan rambut.

Sementara kita berbicara tentang memotong teks…

Link pada 1 Oktober 2021