css di luar paparan

Limpahan CSS merujuk kepada cara mengendalikan kandungan limpahan apabila kandungan elemen melebihi lebar atau ketinggian yang ditentukan. Dalam kes ini, kita boleh menggunakan beberapa sifat dan nilai yang disediakan oleh CSS untuk mengawal paparan dan penyembunyian kandungan luar dan menjadikannya kelihatan lebih cantik dan boleh dibaca dalam halaman.

Sifat limpahan CSS

Apabila kandungan elemen melebihi lebar atau ketinggian yang ditentukan, kita boleh menggunakan sifat limpahan dalam CSS untuk mengawal cara kandungan limpahan dipaparkan. Atribut limpahan mempunyai nilai berikut:

• kelihatan: Kandungan lebihan akan dipaparkan di luar elemen dan mungkin mengaburkan elemen lain.
• tersembunyi: Kandungan berlebihan akan dipangkas dan tidak akan dipaparkan pada halaman.
• skrol: Jika kandungan melimpah, bar skrol akan dipaparkan supaya pengguna boleh menatal.
• auto: Jika kandungan melimpah, bar skrol akan dipaparkan, jika tidak kandungan akan dipaparkan seperti biasa.

Sebagai contoh, jika kita ingin memaparkan beberapa kandungan dalam div ketinggian tetap, apabila kandungan melebihi ketinggian div, kita boleh menetapkan atribut limpahan untuk menatal atau tersembunyi.

Sesetengah kandungan yang sangat panjang

🎜>Dalam contoh ini, apabila kandungan elemen p melebihi ketinggian 200px, bar skrol menegak akan dipaparkan supaya pengguna boleh menatal untuk melihat kandungan.

Sifat limpahan teks CSS

Selain menggunakan sifat limpahan untuk mengawal cara kandungan dipaparkan apabila ia melebihi, kami juga boleh menggunakan sifat limpahan teks dalam CSS untuk mengawal cara kandungan teks dipaparkan apabila ia melebihi . Atribut limpahan teks hanya berkuat kuasa apabila atribut ruang putih ditetapkan kepada nowrap.

text-overflow mempunyai tiga nilai berikut:

klip: Apabila teks melebihi, ia akan dipangkas dan tidak akan dipaparkan pada halaman.

• ellipsis: Ellipsis akan dipaparkan apabila teks melebihi.
• rentetan: Rentetan yang ditentukan akan dipaparkan di luar teks.
• Sebagai contoh, jika kita ingin memaparkan tajuk yang panjang dalam satu baris, apabila teks tajuk melebihi lebar elemen, kita boleh menggunakan atribut limpahan teks dan atribut ruang putih.

Ini adalah tajuk yang panjang, panjang, panjang

Dalam contoh ini, apabila teks tajuk melebihi lebar elemen, elipsis akan dipaparkan untuk memberitahu pengguna bahawa teks telah dipotong.

Atribut pembalut perkataan CSS

Selain menggunakan atribut limpahan dan limpahan teks untuk mengawal limpahan dan pemotongan kandungan elemen, kita juga boleh menggunakan atribut bungkus perkataan dalam CSS untuk kawal perkataan teks bagi pemisah baris.

Secara lalai, apabila perkataan melebihi lebar elemen, ia akan dipotong dan dipaparkan pada baris seterusnya. Tetapi jika kita ingin memastikan bahawa perkataan tidak dipotong dan dibalut pada sempadan perkataan, kita boleh menggunakan atribut word-wrap. Atribut

word-wrap mempunyai dua nilai berikut:

normal: Perkataan dipecahkan pada sempadan dan tidak akan dipotong.

• kata putus: Perkataan akan dipecahkan di mana-mana sahaja, dan akan dipotong apabila perkataan itu terlalu panjang.
• Sebagai contoh, jika kita ingin memaparkan beberapa teks panjang dalam lebar terhad, tetapi juga memastikan bahawa semua perkataan dibalut pada sempadan dan semua kandungan berlebihan dipangkas, kita boleh menggunakan CSS berikut:

Ini ialah teks yang panjang, panjang dan panjang. Ia mengandungi banyak perkataan, tetapi ia membungkus di sempadan dan tidak dipotong.

Kesimpulan

Apabila mereka bentuk halaman web, biasanya kami perlu menyesuaikan kandungan kepada saiz dan resolusi skrin yang berbeza sebanyak mungkin. Untuk memastikan kandungan limpahan boleh dipaparkan dengan betul pada halaman, kami boleh menggunakan beberapa sifat dan nilai yang disediakan dalam CSS, seperti limpahan, limpahan teks dan balut perkataan, yang boleh membantu dengan reka letak halaman dan menjadikan halaman kelihatan lebih jelas dan kemas.

Atas ialah kandungan terperinci css di luar paparan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!