Text Overflow

Judul berita panjang, nama produk, atau kutipan singkat sering tidak muat di ruang yang tersedia. Bila dibiarkan, teks meluber dan merusak tata letak; bila dipotong mentah, pembaca tidak diberi tanda bahwa teksnya bersambung. Pasangan property overflow dan text-overflow menyelesaikan masalah ini dengan menutup teks terpotong memakai tanda elipsis “…”. Pada chapter ini kita rangkai resep elipsis satu baris, varian multi baris dengan line clamp, dan langkah penjagaan aksesibilitasnya.

Resep Elipsis Satu Baris #

.judul-berita {
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Resep ini hanya bekerja bila ketiga property lengkap — text-overflow tidak memicu pemotongan apa pun sendirian. Mari kita baca perannya satu per satu:

1. max-width: 320px membatasi lebar kotak. Tanpa batas lebar, teks satu baris tidak akan pernah meluber, sehingga tidak ada bagian yang perlu dipotong.
2. white-space: nowrap — dipelajari pada chapter sebelumnya — menahan teks tetap satu baris. Tanpa ini teks pindah baris ke bawah dan tidak pernah keluar ke samping.
3. overflow: hidden memotong bagian teks yang keluar dari kotak.
4. text-overflow: ellipsis menggambar tanda “…” pada batas terpotong. Nilai lainnya, clip, memotong tanpa tanda apa pun.

Urutan penulisannya bebas, tetapi paket nowrap + hidden + ellipsis layak disimpan sebagai satu kesatuan yang tidak boleh terpisah.

Satu batasan teknis perlu dipahami sejak awal: text-overflow menandai bagian yang terpotong pada arah inline (horizontal untuk teks latin). Teks yang terpotong oleh tinggi kotak — misalnya lewat height yang kecil — tetap terpotong tanpa tanda apa pun; itu pekerjaan overflow, bukan text-overflow.

Memotong Beberapa Baris: line-clamp #

Elipsis satu baris memotong apa pun setelah baris pertama. Untuk kartu ringkasan yang boleh dua atau tiga baris, kita memakai pola line clamp:

.ringkasan-produk {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

1. display: -webkit-box mengubah elemen menjadi kotak khusus yang mendukung penghitungan baris.
2. -webkit-line-clamp: 2 membatasi tampilan maksimal dua baris dan menutup baris kedua dengan “…”.
3. -webkit-box-orient: vertical menegaskan arah penumpukan dari atas ke bawah.
4. overflow: hidden menyembunyikan baris-baris di bawah batas.

Pola ini berawalan -webkit- namun berjalan di seluruh browser modern, termasuk Firefox. Properti standar line-clamp tanpa awalan kini mulai tersedia; sampai dukungannya menyamai pola berawalan yang sudah teruji bertahun-tahun, pola di atas tetap menjadi pilihan paling aman.

Tentukan jumlah barisnya sesuai jenis konten, bukan sekadar selera: judul kartu biasanya dibatasi satu baris, ringkasan berita dua sampai tiga baris, dan deskripsi produk tiga sampai empat baris. Batas yang konsisten antarkartu membuat grid tetap rapi karena tinggi kartu tidak bergantung pada panjang teks aslinya.

Demo berikut memakai kedua resep itu pada satu kartu:

Jangan Biarkan Teks Hilang Tanpa Jejak #

Elipsis hanya tanda visual. Isi yang terpotong tetap ada di HTML, tetapi pengguna tidak mendapat jalan untuk membacanya. Perlu dicatat pula sisi positifnya: karena teks masih utuh di DOM, pencarian dalam halaman (Ctrl+F) tetap menemukannya dan penerjemah otomatis tetap membacanya — yang hilang hanyalah tampilannya. Sediakan salah satu pintu berikut agar isi penuh tetap terjangkau:

• Atribut title pada elemen yang dipotong — tooltip muncul saat kursor diam di atasnya. Membantu pengguna mouse, tetapi tidak tersentuh keyboard dan layar sentuh.
• Teks lengkap untuk pembaca layar — duplikat isi dalam elemen yang hanya terlihat oleh teknologi bantu.
• Tombol “selengkapnya” — membuka teks penuh saat diminta; paling jujur bagi semua pengguna.

Pola kelas pembantu untuk poin kedua:

.teks-pembaca-layar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

Elemen dengan class ini tetap terbaca pembaca layar tetapi tidak terlihat di layar. Cukup letakkan teks lengkapnya di dalam elemen ber-class tersebut — misalnya <span class="teks-pembaca-layar">Judul lengkap berita</span> — di samping teks yang dipotong.

Kesalahan Umum #

Ringkasan #

Memotong teks satu baris adalah paket tiga property: white-space: nowrap menahan baris, overflow: hidden memotong, dan text-overflow: ellipsis menandai ujungnya. Untuk beberapa baris, pola -webkit-line-clamp mengambil alih dengan batas jumlah baris yang kita tentukan. Karena elipsis menyembunyikan isi, selalu sediakan jalur alternatif menuju teks lengkap. Tata letak teks kini lengkap; chapter berikutnya naik ke sumbernya — dari mana font di halaman web berasal.