CSS / Memotong tampilan teks satu dan beberapa baris dengan elipsis

Untuk mempersingkat teks panjang secara visual dengan CSS, gunakan text-overflow: ellipsis untuk satu baris dan properti line-clamp untuk membatasi beberapa baris. CSS tidak menghapus string asli atau mengembalikan jumlah karakter tetap. Lebar yang tersedia, pembungkusan, dan overflow harus bekerja sama agar pemotongan terlihat.

Membedakan pemotongan tampilan dan perubahan string

Membatasi judul hanya pada satu baris atau ringkasan kartu hingga tiga baris berbeda dengan menggunakan 20 karakter pertama sebagai data. Gunakan CSS untuk batas visual dan JavaScript atau pemrosesan sisi server untuk operasi string yang sebenarnya. Teks tersembunyi tetap ada dalam dokumen, jadi CSS tidak mengurangi panjang data asli atau ukuran transfer.

Membandingkan satu dan tiga baris melalui contoh lengkap

Simpan kode lengkap di bawah ini sebagai truncate.html dalam UTF-8 dan buka di browser. Tidak perlu library atau server. Kalimat yang diulang membuat teks cukup panjang, dan kartu memiliki lebar maksimum 24rem. Simpan dan muat ulang setelah mengedit, lalu bandingkan jendela yang lebih lebar dan lebih sempit.

<!DOCTYPE html>

<html lang="id">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Perbandingan teks satu dan beberapa baris</title>
<style>
    body { max-width: 42rem; margin: 0 auto; padding: 1rem; font-family: sans-serif; }
    h2 { font-size: 1.1rem; }
    .card { width: 100%; max-width: 24rem; }
    .frame { padding: 12px; border: 1px solid #777; margin-block: 1rem; }
    .sample { margin: 0; }
    .one { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .three { font-size: 16px; line-height: 1.6; max-height: 4.8em; overflow: hidden;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .row { display: flex; align-items: center; gap: 12px; }
    .grow { flex: 1; min-width: 0; }
    .badge { flex: 0 0 auto; }
    .full { line-height: 1.6; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>Perbandingan teks satu dan beberapa baris</h1>
<div class="card">
<h2>text-overflow: ellipsis</h2>
<div class="frame"><p class="sample one">Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. </p></div>
<h2>-webkit-line-clamp: 3</h2>
<div class="frame"><p class="sample three">Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. </p></div>
<h2>display: flex</h2>
<div class="frame row"><div class="grow"><p class="sample one">Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. </p></div><span class="badge">A</span></div>
<details>
<summary>Baca teks lengkap</summary>
<p class="sample full">Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. Contoh ini menampilkan judul dan ringkasan panjang dalam kartu terbatas. Walaupun sebagian teks dipersingkat secara visual, teks lengkap tersedia pada bagian yang dapat dibuka di bawah. </p>
</details>
</div>
</body>
</html>

Harapkan pemotongan satu baris di kotak pertama, paling banyak tiga baris di kotak kedua jika didukung, dan pemotongan satu baris di dalam Flexbox pada kotak ketiga. Buka bagian yang dapat diperluas di bawah untuk membaca keseluruhan teks. Teks pendek mungkin tidak pernah mencapai batas dan karena itu tidak menunjukkan elipsis. Pembungkusan sebenarnya tergantung pada font, konten, dan lebar yang tersedia.

Syarat elipsis pada satu baris

Pemendekan satu baris mengharuskan teks meluap dari ruang horizontalnya. white-space: nowrap mencegah pembungkusan, overflow: hidden menyembunyikan kelebihan, dan text-overflow: ellipsis menandai akhir yang terpotong. Berikut adalah aturan .one dari contoh lengkap.

.one {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Mengatur text-overflow saja tidak memaksa teks meluap atau membuat kotak lebih sempit. Kartu induk membatasi lebar di sini. Jika kotak terus tumbuh dengan kontennya, atau teks cukup pendek, elipsis tidak muncul. Elemen inline biasa mungkin tidak berperilaku seperti yang diharapkan; periksa kotak blok dan konteks tata letak sebenarnya. penjelasan MDN tentang text-overflow

Membatasi beberapa baris dan menyediakan tinggi cadangan

Menambahkan text-overflow: ellipsis saja tidak menempatkan elipsis di akhir baris ketiga. Contoh ini menggabungkan deklarasi kompatibilitas lama -webkit-line-clamp: 3, display: -webkit-box, dan -webkit-box-orient: vertical, bersama dengan overflow tersembunyi. Berikut adalah aturan .three-nya.

.three {
  font-size: 16px;
  line-height: 1.6;
  max-height: 4.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

Dengan ukuran font 16px dan tinggi baris 1,6 di sini, satu baris memiliki tinggi 25,6px dan tiga baris menempati 76,8px, atau 4,8em. max-height: 4.8em membatasi tinggi meskipun pembatasan jumlah baris tidak tersedia. Batas tinggi saja tidak menjamin elipsis. Perhitungan ini mengasumsikan ukuran font dan tinggi baris yang konsisten pada contoh, tanpa padding atau border terpisah pada elemen teks.

Properti line-clamp yang tidak memiliki prefiks memiliki dukungan browser yang bervariasi, jadi periksa tabel dukungan dan tampilan di lingkungan target Anda. Terapkan secara progresif dengan kueri fitur bila sesuai, dan periksa dukungan sebelum mengganti deklarasi kompatibilitas. Untuk membandingkan dua baris, ubah jumlah clamp dan tinggi fallback menjadi 2 dan 3,2em, lalu kembalikan ke nilai asli. Informasi kompatibilitas dan dukungan line-clamp di MDN

Jika elemen tidak menyusut dalam Flexbox atau Grid

Lebar minimum otomatis suatu item flex dapat membuatnya tetap terikat pada ukuran kontennya, mencegah penyusutan yang cukup saat induknya menyempit. Contohnya memberi .grow baik flex: 1 maupun min-width: 0 sehingga dapat menyusut. Terapkan pemendekan pada .one, yang sebenarnya berisi teks.

Hapus sementara min-width .grow di alat pengembang, bandingkan dan kembalikan. Ini bukan persyaratan universal untuk setiap item flex; periksa ukuran minimum aktual dan kondisi overflow. Untuk masalah ukuran minimum otomatis Grid, periksa min-width item dan pertimbangkan definisi track fleksibel seperti minmax(0, 1fr) jika sesuai. MDN penjelasan tentang ukuran minimum otomatis di min-width

Menyediakan teks lengkap dan aksesibilitas

Sediakan cara untuk membaca konten tersembunyi. Elemen details dan summary pada contoh adalah elemen HTML asli yang bekerja dengan mouse, sentuhan, dan keyboard tanpa JavaScript. Antarmuka nyata sebaliknya dapat menyediakan tautan halaman detail atau kontrol ekspansi lain yang jelas.

1. Jangan mengandalkan tooltip mouse dengan atribut title sebagai satu-satunya cara untuk membaca konten secara penuh. Pengguna layar sentuh dan keyboard juga perlu mendapatkan akses.
2. Cara teks tersembunyi ditampilkan saat disalin atau dibaca oleh teknologi bantu dapat bervariasi. Pastikan teks yang diperlukan tetap dapat dibaca dan fokus bekerja pada kontrol perluasan.
3. Periksa layar seluler, zoom, dan font yang dipilih pengguna. Jangan menjanjikan jumlah karakter atau kata yang tetap, dan hindari memotong informasi penting, tombol, atau bidang input.