Apa properti luapan di css?

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 a

Tidak 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 luapan

Nilai / 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 ada

Agen 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

, keduanya akan bertepatan di pojok kanan atas padding edge. Namun, jika bilah gulir ada maka akan terlihat sepenuhnya, di tepi kotak bantalan kanan yang berdekatan dengan bilah gulir;

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

punya, tapi. Bagian dalam

memiliki margin besar dan biasanya pas. ... article { overflow: auto; max-height: 5em; width: max-content; } section { margin: 2em; line-height: 1 } ... <article> <section> This section has big margins. section> article>

Jika kita berasumsi bahwa

membutuhkan scrollbar, lalu tingginya

, termasuk satu baris teks dan margin dua kali 2em, menambahkan hingga 5em plus bilah gulir. Karena itu lebih besar dari 5em, tinggi maksimum yang diperbolehkan, sepertinya kita membuat asumsi yang benar dan d1 memang membutuhkan scrollbar

Namun, kita harus mulai dengan mengasumsikan bahwa tidak diperlukan scrollbar. Dalam hal ini tinggi konten

persis tinggi maksimum 5em, membuktikan bahwa asumsi itu benar dan

memang seharusnya tidak memiliki scrollbar

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 ruang

Catatan. 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 berlawanan

Ketika 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 tersedia

Istilah "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; } 5

detail 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 ELLIPSE

Catatan. 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 panjang

Jika 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 dihilangkan

Lihat 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> _2

6. 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> _4

Rendering 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> 5

Perhatikan 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.

Apa itu luapan di CSS?

Bagaimana cara menggunakan luapan di CSS?

Bagaimana cara memperbaiki luapan di CSS?

Apa itu gaya luapan?