Text Overflow dan Wrapping CSS: Menjinakkan Teks Panjang

Kamu bikin kartu yang rapi, masukkan sedikit teks, dan semuanya kelihatan bagus — sampai ada pengguna yang menempel URL sepanjang 60 karakter atau mengetik satu kata raksasa tanpa spasi. Tiba-tiba teksnya menerobos keluar dari sisi kotak, muncul scrollbar horizontal, dan tata letakmu jadi terlihat berantakan. Inilah salah satu cara paling umum konten dunia nyata diam-diam merusak desain yang tadinya bersih.

Kabar baiknya: CSS punya seperangkat alat yang presisi untuk masalah ini. Kamu bisa menentukan apakah teks boleh wrap atau harus tetap satu baris, apakah kata panjang boleh dipotong di tengah, apakah teks yang meluber diberi tanda … yang rapi, bahkan berapa baris sebuah paragraf boleh muncul sebelum dipotong. Artikel ini akan membahas semuanya, supaya tidak ada lagi sepotong teks pun — seaneh apa pun — yang bisa merusak tata letakmu.

Kenapa teks bisa meluber

Secara bawaan, browser memotong baris teks di spasi. Kalimat biasa mengalir ke beberapa baris karena ada spasi di antara kata-kata yang bisa dijadikan titik potong. Masalah mulai muncul ketika tidak ada tempat yang enak untuk memotong:

• Kata yang sangat panjang: pneumonoultramicroscopicsilicovolcanoconiosis
• URL tanpa spasi: https://example.com/some/really/long/path?x=1&y=2
• Alamat email, hash, API key, atau path file

Karena tidak ada spasi, browser memperlakukan setiap hal itu sebagai satu unit utuh yang tak bisa dipecah. Kalau unit tersebut lebih lebar dari container-nya, ya dia tinggal nyembul keluar saja alih-alih wrap. Ini erat kaitannya dengan perilaku Overflow CSS secara umum, tapi teks punya seperangkat property tersendiri — dan itulah yang benar-benar kamu butuhkan di sini.

.card {
  width: 200px;
  /* URL panjang di dalam ini akan meluber melewati 200px */
}

Mari kita bahas satu per satu, mulai dari property yang mengatur wrap itu sendiri.

white-space: wrap atau tidak

Property white-space mengatur dua hal sekaligus: apakah teks boleh wrap, dan bagaimana rentetan spasi (spasi, tab, baris baru) diperlakukan. Nilai yang paling sering kamu pakai:

.normal   { white-space: normal; }    /* bawaan — wrap, spasi diciutkan */
.nowrap   { white-space: nowrap; }     /* tidak pernah wrap — satu baris panjang */
.pre      { white-space: pre; }        /* spasi & baris baru disimpan, tanpa wrap */
.pre-wrap { white-space: pre-wrap; }   /* spasi & baris baru disimpan, TETAP wrap */
.pre-line { white-space: pre-line; }   /* spasi diciutkan, baris baru disimpan */

Berikut yang sebenarnya dilakukan masing-masing:

Dua bintang di sini adalah nowrap dan pre-wrap. Pakai nowrap kalau kamu mau teks tetap satu baris apa pun yang terjadi — pas banget buat label tombol atau sel tabel yang tidak boleh pecah. Pakai pre-wrap kalau kamu menampilkan sesuatu yang spasi dan baris barunya penting, misalnya kode atau pesan dari pengguna, tapi tetap mau dia wrap ketimbang meluber.

overflow-wrap: potong kata panjang hanya saat perlu

Sekarang property yang menyelesaikan masalah URL panjang. overflow-wrap (nama lamanya: word-wrap) memberi tahu browser bahwa dia boleh memotong di dalam sebuah kata, tapi hanya kalau kata itu memang akan meluber dari container-nya:

.card {
  width: 200px;
  overflow-wrap: break-word;
}

Dengan break-word, teks biasa tetap wrap rapi di spasi seperti biasa, tapi URL raksasa atau kata jumbo tadi sekarang akan dipecah antar baris supaya tetap di dalam kotak. Ini opsi yang sopan: dia cuma memotong kata kalau benar-benar terpaksa.

/* Nilai-nilainya */
.a { overflow-wrap: normal; }       /* bawaan — hanya potong di spasi */
.b { overflow-wrap: break-word; }   /* potong kata panjang agar tak meluber */
.c { overflow-wrap: anywhere; }     /* mirip break-word, juga memengaruhi min-width */

Untuk 95% situasi nyata, overflow-wrap: break-word adalah baris yang kamu mau. Ini pertahanan terbaik melawan konten dari pengguna yang bikin tata letak jebol.

word-break: potongan yang lebih galak

word-break adalah sepupu overflow-wrap yang lebih tegas. Alih-alih “potong kata panjang hanya kalau bakal meluber”, dia bisa memotong kata jauh lebih agresif:

.x { word-break: normal; }      /* perilaku bawaan */
.y { word-break: break-all; }   /* potong di antara DUA karakter apa pun agar muat */
.z { word-break: keep-all; }    /* jangan potong teks CJK antar karakter */

Nilai yang menarik di sini adalah break-all. Dengan ini, browser akan memotong baris di antara dua karakter mana pun kalau perlu — bahkan di tengah kata, bahkan saat sebenarnya ada titik potong yang lebih halus. Hasilnya bisa jelek untuk teks paragraf biasa (kata terpotong di tempat aneh), jadi pakai seperlunya saja. Dia paling berguna untuk kolom data yang padat dan sempit, seperti sel kecil yang menampilkan hash heksadesimal yang panjang.

Jadi bagaimana memilih di antara keduanya?

• overflow-wrap: break-word → pilihan defaultmu. Kata normal tetap utuh, hanya yang kelewat panjang yang dipotong. Paling enak dibaca.
• word-break: break-all → pakai kalau tata letak lebih penting daripada potongan baris yang cantik, misalnya kotak berlebar tetap yang sama sekali tidak boleh meluber.

hyphens: potong kata pakai tanda hubung

Untuk kata panjang di teks yang mengalir, kamu bisa membiarkan browser menyisipkan tanda hubung — menambahkan - di batas suku kata yang masuk akal saat dia memotong kata antar baris:

.article {
  hyphens: auto;
}

hyphens: auto menghasilkan paragraf yang terasa jauh lebih rapi, terutama di kolom yang sempit, karena kata-kata dipotong di titik alami lengkap dengan tanda hubung, bukannya menyisakan celah yang janggal. Ada satu syarat: ini bergantung pada browser yang tahu aturan pemenggalan kata sebuah bahasa, jadi kamu sebaiknya menetapkan bahasa di elemen HTML-mu agar berfungsi maksimal:

<html lang="id">

Nilainya ada none (jangan pernah memenggal), manual (hanya di titik yang kamu sarankan, seperti ­), dan auto (biarkan browser yang menentukan). Untuk teks isi pada tata letak rata kanan-kiri atau yang sempit, hyphens: auto adalah sentuhan kecil yang membuat tipografi terlihat jauh lebih profesional.

text-overflow: si ellipsis (…)

Sekarang yang paling terkenal. text-overflow mengatur apa yang terjadi pada teks yang terpotong di tepi kotaknya — dan nilai bintangnya, ellipsis, mengganti bagian yang terpotong dengan tanda … yang rapi:

.truncate {
  white-space: nowrap;       /* 1. tahan di satu baris */
  overflow: hidden;          /* 2. potong yang tidak muat */
  text-overflow: ellipsis;   /* 3. tampilkan … alih-alih potongan kasar */
}

Ketiga baris itu bersama-sama adalah pola pemotongan teks, dan kamu akan sering banget menulisnya — untuk judul kartu, item daftar, nama file, apa saja yang harus muat di satu baris dan berakhir dengan mulus. Ketiganya wajib ada:

1. white-space: nowrap memaksa satu baris (ellipsis tidak jalan di teks yang wrap).
2. overflow: hidden yang benar-benar memotong luberannya.
3. text-overflow: ellipsis mengganti ujung yang terpotong dengan ….

<div class="truncate" style="width: 150px;">
  Judul ini terlalu panjang untuk muat dalam satu baris
</div>
<!-- Tampil jadi: "Judul ini terlalu pan…" -->

Membatasi ke beberapa baris

Trik ellipsis klasik tadi cuma jalan di satu baris. Tapi bagaimana kalau kamu mau deskripsi muncul, misalnya, tiga baris lalu berakhir dengan …? Itu tugas line-clamp, dan ini pas banget untuk kartu dan pratinjau:

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;     /* tampilkan 3 baris, lalu … */
  overflow: hidden;
}

Ya, sintaksnya memang aneh, bertele-tele, dan penuh prefix -webkit- — itu peninggalan sejarah, tapi dukungannya andal di semua browser modern, jadi kamu bisa pakai dengan tenang. Ganti angka 3 dengan jumlah baris yang kamu mau. Beginilah hampir semua kartu produk, pratinjau artikel, dan cuplikan komentar membatasi teksnya jadi blok yang rapi.

/* Property standar modernnya juga ada: */
.clamp-modern {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;             /* versi standar, dukungan makin luas */
  overflow: hidden;
}

Sertakan baik -webkit-line-clamp maupun line-clamp tanpa prefix untuk cakupan terbaik — yang berprefix yang bekerja keras hari ini, dan yang standar menyiapkanmu untuk masa depan.

Menggabungkan semuanya: kartu yang aman

Mari kita gabungkan ini jadi kartu yang sama sekali tidak bisa dirusak konten buruk — judul panjang yang terpotong, deskripsi yang dibatasi tiga baris, dan URL yang wrap alih-alih meluber:

.card {
  width: 280px;
  padding: 16px;
}

.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;       /* judul satu baris dengan … */
}

.card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;              /* deskripsi dibatasi 3 baris */
}

.card-url {
  overflow-wrap: break-word;     /* link panjang wrap, tak pernah meluber */
}

<div class="card">
  <h3 class="card-title">Judul produk yang ternyata panjang dan tidak akan muat</h3>
  <p class="card-desc">Deskripsi yang mungkin mengalir cukup panjang tapi akan
  dipotong rapi setelah tiga baris supaya semua kartu tetap setinggi yang sama.</p>
  <a class="card-url" href="#">https://example.com/a/very/long/path/that/wraps</a>
</div>

Apa pun konten yang dijejalkan pengguna ke kartu ini — tembok teks, kata jumbo tanpa spasi, URL yang melebar — bentuknya tetap terjaga. Itulah tujuan utamanya: tata letak yang tetap tenang menghadapi input dunia nyata yang berantakan.

Praktik terbaik

Beberapa kebiasaan yang akan menyelamatkanmu dari bug tata letak di kemudian hari:

• Tambahkan overflow-wrap: break-word ke container apa pun yang menampilkan konten dari pengguna — komentar, username, isi pesan, hasil pencarian. Kamu tidak bisa menebak apa yang akan ditempel orang.
• Ingat trio ellipsis. white-space: nowrap + overflow: hidden + text-overflow: ellipsis, selalu ketiganya bersama.
• Utamakan overflow-wrap: break-word ketimbang word-break: break-all untuk teks biasa — dia cuma memotong saat perlu dan menjaga teks tetap enak dibaca. Simpan break-all untuk data padat berlebar tetap.
• Tetapkan lang di <html>-mu supaya hyphens: auto (dan pengecekan ejaan browser serta pembaca layar) bekerja dengan benar.
• Pakai line-clamp untuk pratinjau alih-alih memotong teks lewat JavaScript — lebih cepat, responsif, dan menyesuaikan diri otomatis saat kotaknya berubah ukuran.
• Uji dengan konten paling buruk yang bisa kamu bayangkan. Tempel kata 200 karakter, email panjang, URL asing. Kalau lolos itu, dia akan lolos menghadapi penggunamu.

Kalau kamu butuh penyegaran soal bagaimana kotak mendapatkan ukurannya — yang jadi dasar dari semua perilaku overflow ini — artikel Box Model CSS membahas aturan width, padding, dan content yang menentukan kapan teks mulai meluber.

Penutup

Teks yang panjang dan berantakan adalah salah satu cara paling ampuh konten nyata merusak tata letak yang tadinya rapi — dan sekarang kamu sudah punya perangkat lengkap untuk menanganinya:

• white-space menentukan apakah teks wrap (normal, pre-wrap) atau tetap satu baris (nowrap).
• overflow-wrap: break-word memotong kata panjang hanya saat akan meluber — jaring pengaman harianmu.
• word-break: break-all memotong lebih agresif untuk kolom sempit yang penuh data.
• hyphens: auto menambahkan potongan baris bertanda hubung yang rapi di teks mengalir (tetapkan lang).
• text-overflow: ellipsis (dengan nowrap + overflow: hidden) memberi … satu baris yang bersih.
• line-clamp membatasi paragraf pada sejumlah baris dengan … di ujungnya.

Kuasai keenam ini dan tata letakmu jadi benar-benar tahan banting menghadapi teks apa pun yang dilemparkan ke sana. Dipadukan dengan pemahaman kuat soal desain responsif, kontenmu akan terlihat memang disengaja di setiap ukuran layar dan dengan segala jenis input.