Tutorial CSS / Overflow CSS, Pembungkusan Teks Panjang, dan Elipsis
Properti overflow mengontrol konten yang melampaui kotak, tetapi tidak memilih strategi pembungkusan teks yang berguna dengan sendirinya. Gabungkan perilaku overflow yang disengaja dengan aturan pembungkusan, dan gunakan elipsis hanya ketika pembaca masih dapat mengakses informasi lengkap.
Bandingkan nilai overflow dengan konten yang identik
| nilai | overflow | Cara pengguna menggulir |
|---|---|---|
| visible | terlihat di luar kotak | Tidak membuat gulir pada kotak itu sendiri |
| hidden | Terpotong di luar kotak | Tidak menyediakan scrollbar default atau gulir pengguna normal |
| auto | Tampilkan di dalam batas | Menyediakan guliran yang diperlukan ketika terjadi overflow |
| scroll | Tampilkan di dalam batas | Membuat wadah gulir terlepas dari apakah terjadi overflow atau tidak. |
Tampilan sebenarnya dari scrollbar dan apakah selalu terlihat tergantung pada pengaturan scrollbar overlay dari sistem operasi dan browser. Menentukan scroll tidak berarti bahwa bilah akan tetap terlihat di semua lingkungan. Tersembunyi (hidden) juga dapat digulir melalui skrip atau pergerakan fokus, sehingga tidak berarti bahwa “kontennya sendiri telah hilang.” Clip, yang sepenuhnya mencegah pengguliran, adalah nilai terpisah dan tidak boleh dianggap sama dengan hidden. Operasi rinci dijelaskan dalam penjelasan overflow di MDN. Sebelum menyembunyikan overflow, periksa bagaimana Anda mengatur tinggi kotak yang menampung konten. Bandingkan pilihan dalam Lebar, Tinggi, Batas min/max, dan box-sizing CSS.
Jika teks umum diperlakukan sebagai tinggi tetap dan tersembunyi, informasi mungkin hilang saat menambahkan kalimat, menerjemahkan, atau memperbesar karakter. Pertama pertimbangkan untuk membiarkan tinggi mengikuti konten, dan gunakan auto jika diperlukan pembatas ukuran, seperti di panel terpisah. Contoh lengkap menempatkan empat kalimat identik dalam kotak 96px yang sama dan hanya membandingkan nilainya. Setelah bagian yang terlihat, kami meninggalkan sedikit ruang ekstra untuk latihan sehingga teks yang meluap tidak menutupi penjelasan berikutnya.
Bungkus URL panjang dan identifier
.url { overflow-wrap: anywhere; }URL tanpa spasi, kode identifikasi, atau kata panjang dapat mendorong kotak keluar karena tidak ada cukup tempat untuk pemisah baris. overflow-wrap: anywhere memberikan kesempatan untuk pemisah baris di tengah string jika diperlukan. Ini tidak menghapus karakter itu sendiri atau memasukkan karakter pemisah baris ke dalam nilai string. Hanya tampilan yang berubah, sehingga Anda bisa mempertahankan string aslinya.
Menerapkan word-break: break-all di mana-mana dapat membuat kata-kata biasa terputus secara tidak perlu. Mulailah dengan mengizinkan pemutusan di daerah nilai panjang. Flexbox dan Grid juga dapat memberlakukan ukuran minimum otomatis, jadi periksa item terkait min-width secara terpisah. Membungkus teks dan mengizinkan kotaknya menyusut menyelesaikan bagian berbeda dari masalah. Untuk detail lebih lanjut, lihat MDN: overflow-wrap, Penjajaran Flexbox, Pembungkusan, gap, grow, dan shrink.
Penuhi syarat untuk elipsis satu baris
.title {
width: 100%;
max-width: 320px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}| kondisi | alasan | Hal yang harus diperhatikan saat hilang |
|---|---|---|
| Sebenarnya lebar terbatas | Perlu situasi yang penuh dengan konten | Jika kotak tumbuh untuk menyesuaikan konten, tidak perlu disingkat. |
| white-space: nowrap | Pertahankan dalam satu baris | Kondisi perbandingan berubah saat baris dibungkus menjadi beberapa baris. |
| overflow: hidden | Potong konten di luar kotak | Teks yang berlebihan mungkin terlihat |
| text-overflow: ellipsis | Tandai ujung yang dipotong dengan elipsis | Jika Anda hanya menutupnya, ujungnya akan terpotong begitu saja. |
text-overflow sendiri tidak menentukan ukuran kotak atau pemisahan baris. Singkatan multi-baris juga merupakan metode yang berbeda dari contoh satu baris ini. Contoh lengkap muncul di paragraf di bawah dengan judul penuh sehingga Anda dapat membaca kembali teks yang terpotong. Jangan menyembunyikan konten yang memerlukan teks asli, seperti instruksi penting atau pesan kesalahan, tanpa cara untuk memeriksanya di tempat lain. Kami menyarankan agar Anda tidak menggunakan tooltip mouse atribut title sebagai satu-satunya sumber teks. MDN: text-overflow.
Buat panel yang dapat digulir agar dapat diakses melalui keyboard
<div class="panel auto" tabindex="0" role="region" aria-label="Notice scroll area">
<p>Notice content</p>
</div>Tergantung pada browser, area gulir mungkin secara otomatis menerima fokus keyboard atau mungkin tidak. Dengan menentukan tabindex="0" untuk panel yang perlu Anda akses, Anda dapat menavigasinya dalam urutan tab normal. role="region" dan nama yang deskriptif membantu pengguna teknologi bantu memahami wilayah mana yang sedang mereka akses. Anda tidak harus membuat setiap kotak menjadi target fokus atau area.
Contoh ini memberikan akses keyboard, nama, dan garis fokus hanya pada panel auto dan scroll yang benar-benar memerlukan pengguliran. Setelah memasuki dengan Tab, periksa apakah Anda dapat berpindah ke paragraf terakhir menggunakan tombol panah atau Page Down. Pada layar sempit, pastikan juga ada perbedaan antara menggulir dalam panel dan menggulir halaman.
Jalankan contoh overflow lengkap
Simpan dan buka kode di bawah ini sebagai UTF-8 di overflow.html. Termasuk semua empat panel dengan konten yang sama, URL panjang, dan judul yang dipersingkat untuk mempertahankan teks asli. Alamat example.com adalah string untuk mengamati pembungkusan baris dan bukan tautan sumber daya yang sebenarnya.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Comparing overflowing content</title>
<style>
* { box-sizing: border-box; }
body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
.panel { width: 100%; max-width: 320px; height: 96px; padding: 12px;
border: 2px solid #777; background: #eef6fa; }
.panel p { margin: 0 0 8px; }
.visible { overflow: visible; }
.visible-stage { padding-bottom: 240px; }
.hidden { overflow: hidden; }
.auto { overflow: auto; }
.scroll { overflow: scroll; }
.panel:focus-visible { outline: 3px solid #9b5d00; outline-offset: 3px; }
.url { max-width: 320px; padding: 12px; border: 1px solid #777; overflow-wrap: anywhere; }
.title { width: 100%; max-width: 320px; padding: 12px; border: 1px solid #777;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.original { max-width: 320px; }
</style>
</head>
<body>
<h1>Overflow and truncation</h1>
<section class="visible-stage"><h2>visible</h2><div class="panel visible"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
<section class="hidden-stage"><h2>hidden</h2><div class="panel hidden"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
<section class="auto-stage"><h2>auto</h2><div class="panel auto" tabindex="0" role="region" aria-label="auto overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
<section class="scroll-stage"><h2>scroll</h2><div class="panel scroll" tabindex="0" role="region" aria-label="scroll overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
<h2>Long URL wrapping</h2><p class="url">https://example.com/abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<h2>Single-line truncation</h2><p class="title">A day of plant care and visitor preparation at Small Garden</p>
<p class="original">Full title: A day of plant care and visitor preparation at Small Garden</p>
</body>
</html>- Bandingkan paragraf terakhir dari keempat panel. Pada visible, tampak di luar batas, pada hidden, tersembunyi, dan pada auto·scroll, harus dipindahkan ke dalam dan dapat dibaca.
- Biarkan hanya satu paragraf di panel auto. Ketika kontennya cukup pendek, periksa apakah ruang scroll menghilang dan kembalikan menjadi empat paragraf. Jangan menilai apakah terjadi overflow hanya dengan melihat bilahnya.
- Pindah ke panel auto dengan Tab dan periksa konten di bawah menggunakan tombol panah. Pastikan garis fokus terlihat, lalu gunakan Shift+Tab untuk mengamati urutan fokus ke arah sebelumnya.
- Matikan deklarasi overflow-wrap pada URL dan perkecil jendela. Periksa apakah string panjang meluap secara horizontal, kemudian kembalikan ke kondisi semula.
- Ubah hanya text-overflow pada judul menjadi clip dan bandingkan hasilnya ketika terpotong tanpa elipsis. Selanjutnya, ubah nowrap menjadi normal untuk memeriksa hasil pembungkusan baris dan kembalikan ke nilai awal.
Jika seluruh halaman terdorong secara horizontal, periksa min-width dan padding dari elemen terluas dan induknya. Jika konten yang harus dibaca hilang, periksa tinggi tetap dan yang tersembunyi terlebih dahulu. Sebelum menambahkan scrolling atau ellipsis, Anda perlu menentukan bagaimana mempertahankan teks asli dan apakah itu dapat dimanipulasi.
