Ketahui ciri CSS baharu: Limpahan keratan berarah:klip

Artikel ini akan memperkenalkan ciri baharu, bermula daripada Chrome 90, ciri limpahan baharu - overflow: clip, gunakannya untuk mengawal arah limpahan dengan mudah.

limpahan: klip Mengapa

Pertama, mari kita perkenalkan secara ringkas penggunaan overflow: clip.

overflow: clip: Ungkapan sangat serupa dengan overflow: hidden, dan turut menjepit padding-box elemen. [Belajar perkongsian video: tutorial video css, bahagian hadapan web]

Walau bagaimanapun, mereka mempunyai dua perbezaan:

• Maksudnya, sebarang bentuk penatalan adalah dilarang sama sekali di dalam overflow: clip. Sudah tentu, ini bukan tumpuan hari ini, jadi mari kita langkaunya buat masa ini.

MDN Teks asal: Perbezaan antara klip dan tersembunyi ialah kata kunci klip juga melarang semua penatalan, termasuk penatalan terprogram.

• overflow: clip boleh mengawal pemangkasan dari arah paksi x dan y, tetapi overflow: hidden tidak boleh.

Itulah maksudnya. Mari kita jelaskan secara ringkas:

limpahan: klip && limpahan: prestasi tersembunyi

Mari kita lihat prestasi overflow: clip dan overflow: hidden tanpa membezakan arah Format:

<div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<div class="hidden">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<div class="clip">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>

.hidden {
    overflow: hidden;
}
.clip {
    overflow: clip;
}

Kami menyediakan 3 bekas DIV, satu daripadanya tidak menetapkan limpahan, dan dua lagi set masing-masing overflow: clip dan overflow: hidden. Kesannya adalah seperti berikut:

Pada masa ini, prestasi overflow: clip dan overflow: hidden adalah konsisten.

overflow: clip boleh ditetapkan secara individu pada paksi x/y

Walau bagaimanapun, perkara yang menjadikan overflow: clip unik ialah ia boleh ditetapkan secara individu pada x- paksi Atau paksi-y, supaya bekas mempunyai keupayaan untuk memangkas dalam arah tertentu, sambil membenarkan limpahan ke arah yang bertentangan.

Lihat DEMO ini:

Fenomena di sini perlu diperhatikan:

• Tetapan tunggaloverflow-x: hidden atau overflow-y: hidden, bentuk ungkapan adalah konsisten dengan overflow: hidden, ia ialah pemangkasan bulat

• dan overflow-x: clip/ overflow-y: clip dalam x mendatar atau menegak y arah sepadan dengan arah lain overflow-x: visible, ia boleh membenarkan limpahan dalam satu arah dan memangkas dalam satu arah!

Dua perkara di atas perlu dijelaskan:

• Tetapan overflow: hidden akan mencipta BFC, jadi tiada cara untuk mengehadkan sahaja satu arah; danoverflow: clip BFC tidak akan dibuat, jadi mereka akan menghasilkan ketidakkonsistenan dalam banyak persembahan (contohnya)

• Apabila limpahan-x/y ditetapkan kepada tersembunyi, limpahan- y/x akan bertukar menjadi auto, walaupun ia ditetapkan kepada boleh dilihat

Untuk DEMO lengkap, anda boleh klik di sini: Demo CodePen -- limpahan: tersembunyi & limpahan: klip

Pada ketika ini, kami telah mencapai kesan yang membenarkan pemangkasan sehala unsur dalam arah x/y, seperti ini:

(Rajah di atas membenarkan Limpahan paksi-x dalam arah, dan pemotongan dalam arah paksi-y)

Pemotongan di arah atas, bawah, kiri dan kanan

Baiklah, jika anda pergi lebih jauh . Sebagai contoh, jika terdapat keperluan bahawa limpahan dibenarkan di arah atas, kiri dan kanan, tetapi pemangkasan diperlukan ke arah bawah, adakah ini boleh dicapai?

Jawapannya ya.

Sebenarnya terdapat banyak cara untuk memangkas elemen dalam CSS, yang boleh menganggarkan fungsi yang serupa dengan overflow: hidden.

Sebagai contoh, kita boleh menggunakan clip-path untuk mencapai pemangkasan satu arah ke atas, bawah, kiri dan kanan. Ini adalah kandungan artikel saya sebelum ini - Cara melaksanakan limpahan: tersembunyi tanpa menggunakan limpahan: tersembunyi Jika anda berminat, anda boleh lihat.

Alamat asal: https://www.cnblogs.com/coco1s/p/16627152.html

Pengarang: ChokCoco

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Ketahui ciri CSS baharu: Limpahan keratan berarah:klip. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!