Bagian ini menjelaskan status dokumen ini pada saat diterbitkan. Daftar publikasi W3C terkini dan revisi terbaru dari laporan teknis ini dapat ditemukan di indeks laporan teknis W3C di https. // www. w3. org/TR/
Dokumen ini diterbitkan oleh Kelompok Kerja CSS sebagai Konsep Kerja menggunakan. Publikasi sebagai Working Draft tidak menyiratkan pengesahan oleh W3C dan Anggotanya
Ini adalah dokumen draf dan dapat diperbarui, diganti, atau usang dengan dokumen lain kapan saja. Tidak tepat untuk mengutip dokumen ini selain pekerjaan yang sedang berjalan
Silakan kirim umpan balik dengan mengajukan masalah di GitHub (lebih disukai), termasuk kode spesifikasi "css-overflow" di judulnya, seperti ini. “[css-overflow] …ringkasan komentar…”. Semua masalah dan komentar diarsipkan. Bergantian, umpan balik dapat dikirim ke milis publik (yang diarsipkan) www-style@w3. org
Dokumen ini diatur oleh Dokumen Proses W3C 2 November 2021
Dokumen ini diproduksi oleh grup yang beroperasi di bawah Kebijakan Paten W3C. W3C menyimpan daftar publik dari setiap pengungkapan paten yang dibuat sehubungan dengan hasil kerja grup; . Seorang individu yang memiliki pengetahuan aktual tentang suatu paten yang menurut keyakinannya terkandung di dalamnya harus mengungkapkan informasi tersebut sesuai dengan
Uraian tentang dan tulisan panjangnya dianggap jauh lebih lengkap dan benar daripada draf kerja sebelumnya atau dari , tetapi beberapa pertanyaan dan masalah tetap terbuka. ''meluap. clip' dan agak baru, dan kurang pengalaman implementasi. stabil, tidak berubah dari definisi sebelumnya di. Meskipun belum sepenuhnya divalidasi oleh pengalaman implementasi, desain dan tulisan tangannya secara kasar dianggap selesai. Versi sebelumnya dari spesifikasi ini menyertakan ide eksperimental baru untuk menangani limpahan dengan membuat kotak baru menggunakan fragmentasi. Ide-ide ini tidak ditinggalkan; . Pekerjaan akan dilanjutkan pada limpahan terfragmentasi setelah level ini stabil selesai
Fitur berikut berisiko, dan dapat dihapus selama periode CR
"Beresiko" adalah istilah seni Proses W3C, dan tidak berarti bahwa fitur tersebut dalam bahaya dihentikan atau ditunda. Ini berarti bahwa WG meyakini bahwa fitur tersebut mungkin mengalami kesulitan untuk diterapkan secara interoperabilitas secara tepat waktu, dan menandainya demikian memungkinkan WG untuk menghapus fitur tersebut jika perlu saat bertransisi ke tahap Usulan Rek, tanpa harus menerbitkan Rek Kandidat baru tanpa
1. pengantar
Di CSS Level 1 , menempatkan lebih banyak konten daripada yang muat di dalam elemen dengan ukuran tertentu umumnya merupakan kesalahan penulisan. Melakukan hal itu menyebabkan konten meluas di luar batas elemen, yang kemungkinan akan menyebabkan konten tersebut tumpang tindih dengan elemen lain
CSS Level 2 memperkenalkan properti, yang memungkinkan penulis menangani luapan dengan menggulir, yang berarti ini bukan lagi kesalahan penulisan. Itu juga memungkinkan penulis untuk menentukan bahwa luapan ditangani dengan kliping, yang masuk akal ketika maksud penulis adalah agar konten tidak ditampilkan
Spesifikasi ini memperkenalkan de-facto dan properti yang sudah lama ada, menambahkan nilai, dan mendefinisikan penanganan luapan secara lebih lengkap
[Sesuatu sesuatu. ]
Catatan. Spesifikasi ini juga mereproduksi definisi properti yang sebelumnya didefinisikan dalam , tanpa tambahan atau modifikasi, untuk menyajikan luapan teks dan bersama-sama
1. 1. Definisi Nilai
Spesifikasi ini mengikuti from menggunakan from. Jenis nilai yang tidak ditentukan dalam spesifikasi ini ditentukan dalam Nilai & Unit CSS [CSS-VALUES-3]. Kombinasi dengan modul CSS lainnya dapat memperluas definisi tipe nilai ini
Selain nilai khusus properti yang tercantum dalam definisinya, semua properti yang ditentukan dalam spesifikasi ini juga menerima sebagai nilai propertinya. Untuk keterbacaan mereka belum diulang secara eksplisit
1. 2. Interaksi Modul
Modul ini menggantikan (menggantikan) dan memperluas fitur yang didefinisikan dalam bagian dan bagian
2. Jenis-Jenis Luapan
CSS menggunakan istilah luapan untuk mendeskripsikan isi kotak yang berada di luar salah satu tepi kotak itu (mis. e. , tepi isinya, tepi pengisi, tepi batas, atau tepi margin). Istilah ini dapat diartikan sebagai elemen atau fitur yang menyebabkan luapan ini, wilayah non-persegi panjang yang ditempati oleh fitur ini, atau, lebih umum, sebagai persegi panjang minimal yang membatasi wilayah tersebut. Luapan kotak dihitung berdasarkan tata letak dan gaya kotak itu sendiri dan semua keturunan yang menyertakan kotak tersebut
Dalam kebanyakan kasus, dapat dihitung untuk sembarang kotak dari batas dan properti kotak itu sendiri, ditambah limpahan dari setiap anaknya. Namun, tidak selalu demikian; . pertahankan-3d juga harus diperiksa
Ada dua jenis luapan berbeda, yang digunakan untuk tujuan berbeda oleh UA
2. 1. Aliran Tinta
Luapan tinta kotak adalah bagian dari kotak itu dan isinya yang menciptakan efek visual di luar kotak batas kotak. Luapan tinta adalah limpahan efek lukisan yang didefinisikan untuk tidak memengaruhi tata letak atau memperpanjang , seperti , gambar pembatas, dekorasi teks, mesin terbang yang menggantung (dengan bantalan sisi negatif, atau dengan ascenders/descenders yang memanjang di luar kotak em), , dll
Karena beberapa efek dalam CSS (misalnya, blur in dan , yang secara teoritis tidak terbatas) tidak menentukan sejauh mana visual yang dicakupnya, sejauh mana tidak terdefinisi
Area luapan tinta adalah area non-persegi panjang yang ditempati oleh kotak dan isinya, dan persegi panjang luapan tinta adalah persegi panjang minimal yang sumbunya sejajar dengan sumbu kotak dan berisi. Perhatikan bahwa adalah persegi panjang dalam sistem koordinat kotak, tetapi mungkin bukan persegi panjang dalam sistem koordinat lain karena transformasi.
Setiap limpahan konten selalu (berlawanan dengan )
2. 2. Overflow yang Dapat Digulir
Overflow yang dapat digulir dari sebuah kotak adalah kumpulan hal-hal yang meluas di luar tepi padding kotak yang mekanisme penggulirannya perlu disediakan
Area limpahan yang dapat digulir adalah wilayah non-persegi panjang yang ditempati oleh , dan persegi panjang luapan yang dapat digulir adalah persegi panjang minimal yang sumbunya disejajarkan dengan sumbu kotak dan yang berisi
adalah persatuan dari
- Miliknya
- Semua langsung dikandung oleh
- Kotak batas dari semua kotak yang merupakan blok penampungnya dan yang kotak batasnya diposisikan tidak seluruhnya di luar atau padding edge, memperhitungkan transformasi dengan memproyeksikan setiap kotak ke bidang elemen yang membentuknya.
Apakah deskripsi penanganan transformasi ini cukup akurat?
Kotak batas dengan area nol tidak memengaruhi
- Area margin dan kotak tempat kotak tersebut membuat blok penampung
UA juga dapat memasukkan area margin dari kotak lain di mana kotak tersebut menetapkan blok penampung; . Ini membutuhkan pengujian dan penyelidikan lebih lanjut;
- Semua kotak di atas (termasuk kotak area nol dan akuntansi untuk transformasi seperti yang dijelaskan di atas), asalkan mereka sendiri memiliki (i. e. jangan sendiri menjebak luapan) dan itu belum terpotong (mis. g. oleh properti atau properti)
juga harus memotong atau harus tetap menjadi operasi cat-time murni, yang berarti luapan yang dapat digulir, meskipun tidak terlihat, akan tetap dapat digulir
Catatan. Properti mask-* tidak mempengaruhi
Perlu mengevaluasi compat menghormati atau mengabaikan dan
- Bantalan tambahan ditambahkan ke sisi - jika diperlukan untuk mengaktifkan posisi gulir yang memenuhi persyaratan perataan
Catatan. Padding ini mewakili, di dalam , padding kotak itu sendiri sehingga ketika kontennya di-scroll ke ujung, ada padding antara tepi-ujung konten aliran (atau mengambang) dan tepi batas kotak. Ini biasanya berakhir dengan ukuran yang persis sama dengan padding kotak itu sendiri, kecuali dalam beberapa kasus—seperti ketika elemen posisi out-of-flow, atau luapan keturunan yang terlihat, telah meningkatkan ukuran luapan yang dapat digulir
Isu. Ganti gambar ini dengan SVG yang tepat
Catatan. Itu selalu persegi panjang dalam sistem koordinat kotak itu sendiri, tetapi mungkin tidak persegi panjang dalam sistem koordinat lain karena transformasi. Ini berarti bilah gulir terkadang dapat muncul saat sebenarnya tidak diperlukan
Properti ini menentukan apakah konten kotak (termasuk ) dipotong ke tepi paddingnya, dan jika demikian, apakah itu adalah wadah gulir yang memungkinkan pengguna untuk menggulir bagian yang dipotong darinya ke dalam tampilan. Area pandang visual dari (melalui area luapan yang dapat digulir dapat dilihat) bertepatan dengan kotak bantalannya, dan disebut port gulir. Untuk kenyamanan, scrollport terdekat dari sebuah kotak adalah leluhur wadah gulir terdekatnya
Properti menentukan penanganan dalam sumbu horizontal (mis. e. , luapan dari sisi kiri dan kanan kotak), dan properti menentukan penanganan luapan pada sumbu vertikal (i. e. , meluap dari sisi atas dan bawah kotak)
Properti and juga menentukan penanganan pada sumbu dan masing-masing
Keempat properti ini membentuk bersama dengan , dan berinteraksi sebagaimana didefinisikan dalam
Properti adalah yang menetapkan nilai yang ditentukan dari dan dalam urutan itu. Jika nilai kedua dihilangkan, itu akan disalin dari yang pertama
Nilai memiliki arti sebagai berikut
terlihatTidak ada penanganan luapan khusus, yaitu konten kotak ditampilkan di luar kotak jika diposisikan di sana. Kotak itu bukan a. hiddenNilai ini menunjukkan bahwa konten kotak terpotong ke kotaknya dan UA tidak boleh menyediakan antarmuka pengguna pengguliran apa pun untuk melihat konten di luar bidang pemotongan, juga tidak mengizinkan pengguliran dengan intervensi langsung dari pengguna, seperti menyeret pada layar sentuh atau menggunakan . Namun, konten harus tetap dapat digulir secara terprogram, misalnya menggunakan mekanisme yang ditentukan dalam , dan oleh karena itu kotak tersebut masih berupa. clipThis nilai menunjukkan bahwa konten kotak terpotong ke kotaknya dan tidak ada antarmuka pengguna gulir yang harus disediakan oleh UA untuk melihat konten di luar wilayah kliping. Selain itu, tidak seperti yang masih memungkinkan pengguliran terprogram, luapan. clip melarang pengguliran seluruhnya, melalui mekanisme apa pun, dan oleh karena itu kotaknya bukan aTidak seperti , nilai ini tidak menyebabkan elemen membuat konteks pemformatan baru
Catatan. Penulis yang juga menginginkan kotak untuk membuat konteks pemformatan dapat digunakan bersama
scrollNilai ini menunjukkan bahwa konten terpotong ke , tetapi dapat digulir ke tampilan (dan oleh karena itu kotaknya adalah ). Selain itu, jika agen pengguna menggunakan mekanisme pengguliran yang terlihat di layar (seperti bilah gulir atau panner), mekanisme tersebut harus ditampilkan terlepas dari apakah kontennya terpotong atau tidak. Ini menghindari masalah dengan bilah gulir yang muncul dan menghilang di lingkungan yang dinamis. Saat media target dicetak, konten yang melimpah dapat dicetak; . autoLike ketika kotak memiliki ; . Jadi, jika agen pengguna menggunakan mekanisme pengguliran yang terlihat di layar (seperti bilah gulir atau panner), mekanisme tersebut hanya akan ditampilkan jika ada luapanNilai / dihitung ke / (masing-masing) jika salah satu dari atau tidak terlihat atau terpotong
Jika nilai yang dihitung pada a bukan atau bukan kombinasi darinya, itu untuk isinya
Jika nilai properti yang dihitung adalah (atau jika memiliki efek yang sama seperti tersembunyi), dan salah satu atau , maka
Agen pengguna tidak boleh membuat mekanisme pengguliran terlihat. Sejauh mekanisme pengguliran yang biasanya terlihat tanpa mempengaruhi tata letak, itu terus berlanjut, tetapi tidak dicat
Seperti halnya dengan , pengguliran yang dipicu langsung oleh interaksi pengguna dinonaktifkan, tetapi pengguliran terprogram terus berlaku
Kurangnya pengguliran langsung interaktif diberlakukan bahkan jika pengguna berinteraksi (mis. g. dengan roda gulir mouse) dengan turunan dari yang disetel ke visibilitas itu sendiri. bisa dilihat
Catatan. Dalam kasus di mana (atau salah satu leluhurnya) adalah target transformasi grafis, UA mungkin perlu mempertimbangkan transformasi ini saat memetakan input pengguna ke operasi pengguliran. Misalnya, pada layar sentuh tempat pengguna menggulir dengan menyeret konten secara langsung, transformasi diharapkan diperhitungkan agar sesuai dengan arah pengguliran ke isyarat. Di sisi lain, masukan pengguna lain (seperti tombol Page Down, atau roda gulir 1D) mungkin lebih alami ditafsirkan dengan mengabaikan transformasi. Memilih perilaku yang sesuai untuk setiap mekanisme pengguliran adalah tanggung jawab UA
3. 1. Luapan di Media Cetak dan Media Statis Lainnya
Karena pengguliran tidak dimungkinkan di media statis (seperti cetak), penulis harus berhati-hati agar konten dapat diakses di media tersebut, misalnya dengan menggunakan @media cetak, (perbarui. none) { … } untuk menyesuaikan tata letak sehingga semua konten yang relevan dapat terlihat secara bersamaan
Aktif di media non-interaktif dengan nilai atau (namun tidak ) UA dapat menampilkan indikasi luapan yang dapat digulir, seperti dengan menampilkan bilah gulir atau elipsis
Catatan. Tidak semuanya non-interaktif. misalnya, pembaca e-book membuat halaman konten, tetapi bersifat interaktif
3. 2. Menggulir Asal, Arah, dan Pembatasan
Posisi gulir awal adalah posisi awal kotak sehubungan dengan kotak batasnya, sebelum pengguliran pengguna atau terprogram apa pun yang mengubahnya. Tergantung pada kotak, dan secara default adalah / tepi kotak. Namun, properti and dapat digunakan untuk mengubahnya, lihat
Karena kendala kompatibilitas Web (disebabkan oleh penulis yang mengeksploitasi bug lama untuk secara diam-diam menyembunyikan konten dari pembaca visual tetapi bukan mesin telusur dan/atau keluaran ucapan), UA harus mengklip the of dan inline-start sisi kotak (sehingga berlaku sebagai
Area pandang menggunakan untuk perhitungan ini
3. 3. Memperluas Batas Kliping. properti
Properti ini menentukan tepi klip luapan kotak, mis. e. persis seberapa jauh di luar batasnya konten kotak boleh dicat sebelum dipotong oleh efek (seperti , di atas) yang ditentukan untuk dijepitkan ke kotak
Nilai didefinisikan sebagai berikut
Menentukan tepi kotak untuk digunakan sebagai asal, i. e. ketika offset yang ditentukan adalah nol
Jika dihilangkan, defaultnya adalah padding-box
Offset yang ditentukan menentukan berapa banyak yang diperluas dari tepi kotak yang ditentukan Nilai negatif tidak valid. Default ke nol jika dihilangkan
Bentuknya di sudut persis sama dengan radius penyebaran offset kumulatif yang sama dari kotak. Lihat dan , catat khususnya rumus untuk permulaan di luar batas tepi
Catatan. Properti ini tidak berpengaruh pada kotak dengan atau luapan. gulir, yang tidak ditentukan untuk menggunakan
3. 4. Overflow Viewport Propagasi
UA harus menerapkan nilai overflow-* yang ditetapkan pada elemen root ke viewport saat nilai elemen root tidak. Namun, jika elemen root adalah elemen ... article { overflow: auto; max-height: 5em; width: max-content; } section { margin: 2em; line-height: 1 } ... <article> <section> This section has big margins. section> article> 6 (termasuk ) yang nilainya (di kedua sumbu), dan elemen tersebut memiliki elemen ... article { overflow: auto; max-height: 5em; width: max-content; } section { margin: 2em; line-height: 1 } ... <article> <section> This section has big margins. section> article> 7 anak yang nilai tampilannya juga bukan tidak ada, agen pengguna harus menerapkan nilai luapan-* . Elemen dari mana nilai disebarkan kemudian harus memiliki nilai luapan terlihat yang digunakan
Catatan. Menggunakan pada elemen HTML ... article { overflow: auto; max-height: 5em; width: max-content; } section { margin: 2em; line-height: 1 } ... <article> <section> This section has big margins. section> article> 6 atau ... article { overflow: auto; max-height: 5em; width: max-content; } section { margin: 2em; line-height: 1 } ... <article> <section> This section has big margins. section> article> 7 menonaktifkan penanganan khusus elemen ... article { overflow: auto; max-height: 5em; width: max-content; } section { margin: 2em; line-height: 1 } ... <article> <section> This section has big margins. section> article> 7 HTML ini. Lihat untuk detailnya
Catatan. pada elemen root mungkin tidak memotong semua yang ada di luar jika ICB lebih kecil dari area pandang, yang dapat terjadi di perangkat seluler
Jika diterapkan ke viewport, itu harus ditafsirkan sebagai. Jika diterapkan ke viewport, itu harus ditafsirkan sebagai
3. 5. Pengguliran Halus. properti
Properti menentukan perilaku pengguliran untuk a , ketika pengguliran terjadi karena navigasi, API pengguliran, atau operasi gertakan gulir yang tidak dimulai oleh pengguna. Gulungan lainnya, mis. g. yang dilakukan oleh pengguna, tidak terpengaruh oleh properti ini. Ketika properti ini ditentukan pada elemen root, properti ini berlaku untuk area pandang
Catatan. Properti elemen HTML ... article { overflow: auto; max-height: 5em; width: max-content; } section { margin: 2em; line-height: 1 } ... <article> <section> This section has big margins. section> article> _7 tidak disebarkan ke viewport
autoThe digulir dengan cara tertentu. smoothThe digulir dengan cara menggunakan fungsi pengaturan waktu yang ditentukan agen pengguna selama periode waktu yang ditentukan agen pengguna. Agen pengguna harus mengikuti konvensi platform, jika adaAgen pengguna dapat mengabaikan properti ini
4. Scrollbar dan Tata Letak
4. 1. Kontribusi Scrollbar ke Ukuran
Saat memesan ruang untuk scrollar yang ditempatkan di tepi kotak elemen, ruang yang dicadangkan disisipkan di antara tepi batas dalam dan tepi padding luar. Untuk tujuan dan bagaimanapun, ruang yang dicadangkan ini dianggap sebagai bagian dari
Dalam fragmen dokumen berikut, elemen yang benar-benar diposisikan dan gambar latar ditempatkan di kanan atas kotak. <style> article { background: top right no-repeat url(circle.png); position: relative; overflow: auto; } aside { position: absolute; top: 0; right: 0; } style> <article> <aside>×aside> article> _
Jika tidak ada bilah gulir yang aktif
Ketika kotak secara intrinsik berukuran, ruang yang disediakan ini ditambahkan ke ukuran isinya. Jika tidak, dikurangi dari ruang yang dialokasikan ke. Sejauh kehadiran scrollbar dapat memengaruhi ukuran, UA harus mulai dengan asumsi bahwa tidak diperlukan scrollbar, dan menghitung ulang ukuran jika ternyata memang demikian
Dalam fragmen dokumen berikut, bagian luar Jika kita berasumsi bahwa Namun, kita harus mulai dengan mengasumsikan bahwa tidak diperlukan scrollbar. Dalam hal ini tinggi konten
4. 2. Memesan ruang untuk bilah gulir. properti
Ruang antara tepi batas dalam dan tepi padding luar yang mungkin dicadangkan oleh agen pengguna untuk menampilkan bilah gulir disebut selokan bilah gulir
Properti memberikan kontrol kepada penulis atas keberadaan secara terpisah dari kemampuan untuk mengontrol keberadaan bilah gulir yang disediakan oleh properti
Properti ini mempengaruhi keberadaan ditempatkan di tepi atau tepi kotak
Kehadiran a di tepi dan tepi kotak tidak dapat dikontrol pada level ini, dan ditentukan dengan cara yang sama seperti keberadaan talang bilah gulir yang ditempatkan di tepi atau tepi kotak saat
Bilah gulir yang secara default ditempatkan di atas kotak konten dan tidak perlu dibuat disebut bilah gulir overlay. Scrollbar seperti itu biasanya sebagian transparan, mengungkapkan konten di baliknya jika ada. Tampilan dan ukurannya dapat bervariasi berdasarkan apakah dan bagaimana pengguna berinteraksi dengannya
Bilah gulir yang selalu ditempatkan dalam , memakan ruang saat ada, disebut bilah gulir klasik. Scrollbar seperti itu biasanya buram
Apakah digunakan atau digunakan, tampilan dan ukuran bilah gulir, dan apakah bilah gulir muncul di tepi awal atau akhir kotak, ditentukan oleh UA
Catatan. Di sisi mana scrollbar muncul mungkin bergantung pada konvensi sistem operasi, , atau pertimbangan ergonomis lainnya
Dalam kasus , lebar , jika ada (lihat di bawah), sama dengan lebar bilah gulir. Dalam kasus , tidak ada talang scrollbar
Catatan. Ada kasus penggunaan yang diketahui yang dapat diatasi dengan mengaktifkan for , tetapi sejauh ini belum ada desain yang memuaskan. Hal ini dapat diatasi dengan perluasan properti ini di masa mendatang. Lihat
Nilai properti ini memiliki arti sebagai berikut
secara otomatis menghabiskan ruang dengan membuat when is , atau ketika luapan dan kotak meluap. tidak memakan ruang. stableThe hadir untuk kapan adalah , , atau , terlepas dari apakah kotak benar-benar meluap. tidak memakan ruangCatatan. Ini tidak mengubah apakah bilah gulir itu sendiri terlihat, hanya keberadaan selokan yang terpengaruh
both-edgesJika a akan ada di salah satu tepi awal sebaris atau tepi ujung sebaris kotak, selokan scrollbar lain juga harus ada di tepi yang berlawananKetika ada tetapi bilah gulir tidak ada, atau bilah gulir transparan atau sebaliknya tidak sepenuhnya mengaburkan talang bilah gulir, latar belakang talang bilah gulir harus dicat sebagai perpanjangan dari padding
Sedangkan untuk properti, ketika diatur pada elemen root, agen pengguna harus menerapkannya ke viewport, dan nilai yang digunakan pada elemen root itu sendiri adalah scrollbar-gutter. mobil. Namun, tidak seperti properti overflow, agen pengguna tidak boleh menyebarkan scrollbar-gutter dari elemen HTML ... article { overflow: auto; max-height: 5em; width: max-content; } section { margin: 2em; line-height: 1 } ... <article> <section> This section has big margins. section> article> 7
5. Elips Otomatis
5. 1. Meluap Ellipsis. properti
Properti ini menentukan rendering saat konten sebaris meluap tepi kotak garisnya dalam arah perkembangan sebaris dari elemen penampung bloknya ("blok") yang memiliki selain
Teks dapat meluap misalnya ketika dicegah dari pembungkusan (mis. g. karena div { font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis; } _3 atau satu kata terlalu panjang untuk muat). Nilai memiliki arti sebagai berikut
clipClip konten sebaris yang meluap dari elemen penampung bloknya. Karakter mungkin hanya dirender sebagian. ellipsisRenderkan karakter elipsis (U+2026) untuk mewakili konten sebaris yang terpotong. Implementasi dapat menggantikan lebih banyak bahasa, skrip, atau karakter elipsis yang sesuai dengan mode penulisan, atau tiga titik ". " jika karakter elipsis tidak tersediaIstilah "karakter" digunakan dalam definisi properti ini untuk keterbacaan yang lebih baik dan berarti "gugus grafem" untuk tujuan implementasi
Untuk implementasi nilai elipsis harus menyembunyikan karakter dan di tepi garis seperlunya agar pas dengan elipsis, dan menempatkan elipsis tepat di tepi ujung konten sebaris yang tersisa. Karakter pertama atau baris harus dipotong daripada elips
Contoh bidi elipsis
Contoh-contoh ini menunjukkan karakter mana yang disembunyikan untuk memberi ruang bagi elipsis dalam situasi bidi. mereka secara visual di ujung garis
Contoh CSS
div { font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis; } _Contoh fragmen HTML, rendering, dan browser Anda
HTMLReference renderingYour Browserdiv { font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis; } 4div { font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis; } 5detail elips
- Ellips hanya memengaruhi rendering dan tidak boleh memengaruhi tata letak atau pengiriman peristiwa pointer. UA harus mengirim event penunjuk apa pun pada elipsis ke elemen yang dieliminasi, seolah-olah tidak ada
- Elipsis ditata dan disejajarkan dengan garis dasar menurut blok
- Ellipsing terjadi setelah pemosisian relatif dan transformasi grafis lainnya
- Jika tidak ada ruang yang cukup untuk elipsis, maka klip rendering elipsis itu sendiri (di sisi yang sama dengan karakter netral pada garis yang seharusnya terpotong dengan teks-overflow. nilai klip)
interaksi pengguna dengan elipsis
- Saat pengguna berinteraksi dengan konten (mis. g. mengedit, memilih, menggulir), agen pengguna dapat memperlakukan sebagai luapan teks. klip
- Memilih elipsis harus memilih teks elips. Jika semua teks elips dipilih, UA harus menampilkan pemilihan elipsis. Perilaku teks elips yang dipilih sebagian tergantung pada UA
Contoh
contoh teks-overflow
Contoh-contoh ini mendemonstrasikan pengaturan luapan teks dari elemen penampung blok yang memiliki teks yang melebihi dimensinya
contoh CSS untuk div
div { font-family:Helvetica,sans-serif; line-height:1.1; width:3.1em; padding:.2em; border:solid .1em black; margin:1em 0; }contoh fragmen HTML, rendering, dan browser Anda
HTMLsample renderingyour browser<div> CSS IS AWESOME, YES div> <div style="text-overflow:clip; overflow:hidden"> CSS IS AWESOME, YES div> <div style="text-overflow:ellipsis; overflow:hidden"> CSS IS AWESOME, YES div> <div style="text-overflow:ellipsis; overflow:hidden"> NESTED <p>PARAGRAPHp> WON’T ELLIPSE. div>BERSARANG
GUGUS KALIMAT
TIDAK AKAN ELLIPSECatatan. sisi garis tempat elipsis ditempatkan bergantung pada blok. e. g. luapan tersembunyi dari kanan-ke-kiri (div { font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis; } 6) klip blok konten sebaris di samping, sehingga akan menempatkan elipsis luapan teks di sebelah kiri untuk mewakili konten yang terpotong
interaksi elipsis dengan antarmuka bergulir
Bagian ini berlaku untuk elemen dengan luapan teks selain luapan teks. klip (meluap teks non-klip) dan luapan. menggulir
Ketika sebuah elemen dengan luapan teks non-klip memiliki luapan gulir dalam dimensi perkembangan sebaris teks, dan browser menyediakan mekanisme untuk menggulir (mis. g. bilah gulir pada elemen, atau antarmuka sentuh untuk menggulir-gesek, dll. ), terdapat detail implementasi tambahan yang memberikan pengalaman pengguna yang lebih baik
Ketika suatu elemen digulir (mis. g. oleh pengguna, manipulasi DOM), lebih banyak konten elemen yang ditampilkan. Nilai text-overflow seharusnya tidak memengaruhi apakah lebih banyak konten elemen ditampilkan atau tidak. Jika luapan teks non-klip disetel, maka saat lebih banyak konten digulir ke tampilan, implementasi harus menunjukkan konten tambahan apa pun yang cocok, hanya memotong konten yang seharusnya dipotong (atau diperlukan untuk memberi ruang bagi elipsis/string),
Contoh ini menggunakan text-overflow pada elemen dengan overflow scroll untuk mendemonstrasikan perilaku yang dijelaskan di atas
contoh CSS
div.crawlbar { text-overflow: ellipsis; height: 2em; overflow: scroll; white-space: nowrap; width: 15em; border:1em solid black; }contoh fragmen HTML
<div class="crawlbar"> CSS is awesome, especially when you can scroll to see extra text instead of just having it overlap other text by default. div>demonstrasi contoh CSS dan HTML
CSS luar biasa, terutama ketika Anda dapat menggulir untuk melihat teks tambahan alih-alih hanya membuatnya tumpang tindih dengan teks lain secara default
Saat konten sedang digulir, implementasi dapat menyesuaikan rendering elipsnya (mis. g. sejajar dengan tepi kotak daripada tepi garis)
5. 2. Menunjukkan Overflow Sumbu Blok. properti
Properti ini memungkinkan penyisipan konten ke kotak baris terakhir sebelum (dipaksa atau tidak) untuk menunjukkan kontinuitas konten yang terpotong/terputus. Ini hanya memengaruhi kotak garis yang dikandungnya secara langsung, tetapi karena diwariskan, akan berpengaruh pada kotak garis keturunan kecuali diganti. Jika kotak tidak berisi kotak garis tepat sebelum jeda wilayah, maka properti ini tidak berpengaruh
Catatan. Lihat cara menghasilkan kotak dengan a
Haruskah ini berlaku untuk jenis pemutusan fragmentasi lainnya (mis. g. halaman, kolom)?
Konten yang dimasukkan disebut elipsis luapan blok. Nilai memiliki arti sebagai berikut
noneRendering tidak terpengaruh. autoRender karakter elipsis (U+2026)—atau setara yang lebih sesuai tipografi—seperti di akhir kotak garis yang terpengaruh. UA harus menggunakan konvensi , sistem penulisan, dan untuk menentukan string elipsis yang paling tepat. Render string yang ditentukan sebagai di akhir kotak garis yang terpengaruh. UA dapat memotong string ini jika terlalu panjangJika tidak , string dibungkus dengan inline anonim dan ditempatkan di ujung kotak baris sebagai anak langsung dari , mengurangi ruang di kotak baris yang tersedia untuk konten baris lainnya. Inline ini ditugaskan dan dan ditempatkan di kotak baris setelah yang terakhir (lihat ) yang masih memungkinkan seluruh elipsis luapan blok untuk muat di baris. Untuk tujuan ini, peluang soft wrap yang ditambahkan oleh diabaikan. Jika ini menyebabkan seluruh isi kotak baris dipindahkan, kotak baris dianggap berisi a , seperti yang didefinisikan di. Teks muncul setelah penempatan, dan mengukur elipsis luapan blok yang disisipkan bersama dengan konten baris lainnya
Catatan. Menyetel 's ke 0 memastikan bahwa memasukkannya tidak dapat menyebabkan tinggi garis bertambah, yang dapat menyebabkan relai lebih lanjut dan berpotensi siklus. Ini hampir sama dengan memasukkan elipsis luapan blok sebagai operasi cat-time, kecuali bahwa itu masih berpartisipasi dalam penyelarasan dan pembenaran. Sisi negatifnya adalah mesin terbang yang sangat tinggi / dalam di elipsis luapan blok dapat meluap
The tidak boleh disertakan baik dalam elemen maupun elemen semu
Jika ada yang berikutnya dalam yang akan menerima konten berikutnya, maka konten yang dipindahkan oleh harus didorong ke wadah fragmentasi itu
UA harus memperlakukan sebagai string yang tidak bisa dipecahkan, Jika ada bagian dari elipsis luapan blok yang meluap, itu diperlakukan sebagai , dan renderingnya dipengaruhi oleh properti
Tidak menangkap peristiwa. acara penunjuk dikirim ke apa pun yang ada di bawahnya
Ini juga tidak berpengaruh pada ukuran intrinsik kotak. dan ukurannya dihitung persis seperti sebelumnya
Catatan. Spesifikasi di masa mendatang dapat memperluas fitur ini, misalnya dengan menyediakan. ellipsis pseudo-element untuk mengatur gaya teks, atau dengan mengizinkan pemilihan elemen turunan dari blok untuk digunakan sebagai indikator level-inline atau level-blok (dalam hal ini, dapat menangkap peristiwa)
6. Fragmentasi Luapan
6. 1. Membatasi Garis Terlihat. properti singkatan
Properti adalah untuk , , dan properti
Untuk saat ini, implementasi eksperimental didorong untuk mengikuti perilaku penuh yang ditentukan oleh steno ini dan tulisan panjangnya, tetapi hanya memaparkan steno kepada penulis. Ini untuk memfasilitasi penyesuaian lebih lanjut, dan khususnya penggantian nama potensial, dari properti tulisan tangan dan nilainya
Ini memungkinkan membatasi isi wadah blok ke jumlah baris yang ditentukan; . Opsional, itu juga memungkinkan memasukkan konten ke dalam kotak baris terakhir untuk menunjukkan kontinuitas konten yang terpotong/terputus
Nilai-nilai tersebut memiliki arti sebagai berikut
noneSet ke , ke , dan ke. Setel ke yang ditentukan , ke , dan properti ke komponen kedua dari nilai atau ke jika dihilangkanLihat properti tulisan tangan yang sesuai untuk detail tentang cara kerja mekanisme ini
Dalam contoh ini, paragraf utama dari setiap artikel dicantumkan dalam menu yang dipersingkat, dipotong agar pas dalam 5 baris yang diakhiri dengan “… (bersambung ke halaman berikutnya)”. ... article { overflow: auto; max-height: 5em; width: max-content; } section { margin: 2em; line-height: 1 } ... <article> <section> This section has big margins. section> article> 0... article { overflow: auto; max-height: 5em; width: max-content; } section { margin: 2em; line-height: 1 } ... <article> <section> This section has big margins. section> article> 1
Perenderan sampel
... article { overflow: auto; max-height: 5em; width: max-content; } section { margin: 2em; line-height: 1 } ... <article> <section> This section has big margins. section> article> _26. 1. 1. Kompatibilitas lama
Untuk kompatibilitas dengan konten lawas, UA yang mendukung juga harus mendukung properti dan nilai tambahan untuk properti tersebut
Seperti , adalah singkatan dari , , dan , kecuali itu
Selain itu, untuk anak-anak (termasuk anak-anak anonim) dari kotak yang propertinya menghitung ke atau , nilai yang digunakan dari , , dan properti diambil dari nilai yang dihitung dari kotak induk;
Nilai -webkit-discard berperilaku identik dengan , kecuali bahwa itu hanya berpengaruh jika nilai properti yang dihitung pada induknya adalah atau dan nilai properti yang dihitung pada induknya adalah vertikal
Catatan. Implementasi properti warisan tidak berperilaku identik dengan apa yang ditentukan di sini. Perilaku historisnya unik dan kurang kuat, seperti yang didokumentasikan misalnya di postingan blog ini. Desain saat ini belajar dari kesalahan percobaan awal tersebut, dan dimaksudkan agar cukup kompatibel dengan konten yang ada sehingga penerapannya pada akhirnya dapat diubah untuk mengikuti perilaku yang ditentukan. Jika diperlukan penyesuaian lebih lanjut, penyesuaian tersebut akan dimasukkan ke dalam spesifikasi ini. Sementara itu, penulis harus menyadari bahwa mungkin ada perbedaan
6. 2. Memaksa Istirahat Setelah Set Jumlah Baris. properti
Properti ini tidak berpengaruh pada kotak yang bukan tangkapan itu
Jika tidak, jika nilai bukan tidak ada, a dipaksakan setelah Nth descendant , di mana N adalah nilai max-lines yang ditentukan. Hanya kotak baris yang sama yang dihitung. isi turunan yang dibuat dilewati sambil menghitung kotak baris
Jika ada kurang dari N kotak garis, maka perkenalkan no
Karena tidak menyebabkan elemen menjadi , baris dalam elemen bersarang dengan dihitung, seperti dapat dilihat pada contoh di bawah. ... article { overflow: auto; max-height: 5em; width: max-content; } section { margin: 2em; line-height: 1 } ... <article> <section> This section has big margins. section> article> _3
Rendering sampel diberikan div { font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis; } _7
... article { overflow: auto; max-height: 5em; width: max-content; } section { margin: 2em; line-height: 1 } ... <article> <section> This section has big margins. section> article> _4Rendering sampel diberikan div { font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis; } _8
... article { overflow: auto; max-height: 5em; width: max-content; } section { margin: 2em; line-height: 1 } ... <article> <section> This section has big margins. section> article> 5Perhatikan bahwa dalam kasus kedua, maksimum 2 baris yang ditetapkan pada elemen #b tidak berlaku, karena pemutusan paksa diperkenalkan sebelum baris kedua dari elemen ini
Catatan. Ini menyiratkan bahwa tidak berpengaruh ketika diterapkan ke , karena setiap kotak baris yang dikandungnya disarangkan
Hanya bilangan bulat positif yang diterima. Bilangan bulat nol atau negatif tidak valid dan harus menyebabkan deklarasi menjadi
Catatan. Properti , , dan tidak mempengaruhi posisi paksa yang diperkenalkan oleh properti
Catatan. Terlepas dari nama "pelanggaran wilayah", ini bukan ketergantungan. Kata "wilayah" hanya digunakan sebagai pengklasifikasi untuk pemutusan paksa. mereka bisa berupa "jeda halaman" (jeda lintas halaman), "jeda kolom" (jeda lintas kolom tata letak multi-kolom), atau "jeda wilayah" (jeda lintas jenis lain yang diinduksi CSS)
Jika sebuah implementasi tidak mendukung nor , maka implementasi tersebut belum memiliki kesempatan untuk mengalami jeda seperti itu, dan ini akan menjadi tambahan. Namun penambahan tersebut tidak melibatkan fungsi [CSS-REGIONS-1] apa pun. Yang dibutuhkan hanyalah
dapat fragmen
mengklasifikasikan wadah fragmentasi ini sebagai "Kategori 3" (i. e. bukan halaman atau kolom) untuk tujuan jeda paksa
6. 3. Fragmentasi Luapan. properti
Properti memberi penulis kemampuan untuk mengubah kotak menjadi (lihat ) dan untuk menentukan konten setelah itu harus dibuang
Properti ini dimaksudkan untuk menggeneralisasi dan mengganti properti div { font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis; } 9 dari. Setelah cukup stabil dalam spesifikasi ini, div { font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis; } 9 harus dihapus dari spesifikasi wilayah yang mendukung ini.