Bagaimana untuk menetapkan css3 di luar fungsi tersembunyi

CSS3 ialah bahagian penting dalam pembangunan web moden. Ia menyediakan pembangun dengan pelbagai alat dan teknik untuk meningkatkan keterlihatan, interaktiviti dan kebolehaksesan tapak web. Salah satunya ialah ciri Beyond Hidden, yang dibincangkan secara terperinci dalam artikel ini.

Apa yang tidak boleh disembunyikan?

Selain bersembunyi ialah ciri yang sangat berguna dalam CSS3. Biasanya, jika kandungan teks melebihi dimensi bekasnya, bahagian yang berlebihan akan dipotong secara automatik. Tetapi jika kita ingin menyembunyikan kandungan berlebihan ini, maka kita boleh menggunakan fungsi penyembunyian berlebihan.

Dalam CSS, pelbagai jenis penyembunyian limpahan boleh dicapai dengan menetapkan nilai atribut yang berbeza:

1. overflow:hidden: Atribut ini boleh digunakan untuk menyembunyikan bahagian di luar bekas. Ia memotong kandungan teks dan menyembunyikan lebihan.
2. text-overflow:ellipsis: Atribut ini boleh memaparkan kandungan teks di luar bekas sebagai elips.
3. white-space:nowrap: Atribut ini boleh memaksa kandungan teks untuk dipaparkan dalam baris yang sama tanpa membalut. Apabila kandungan melebihi saiz bekas, ia akan disembunyikan.

Bagaimana untuk menggunakan Beyond Hide?

Menggunakan ciri Beyond Hide adalah sangat mudah. Berikut ialah beberapa contoh untuk membantu memahami:

Beyond Hide Contoh 1:

Mula-mula, kami mentakrifkan bekas div ringkas dan kemudian menambah beberapa kandungan teks padanya:

<div class="container">
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
</div>

Seterusnya, kami akan menggunakan overflow:hidden untuk menyembunyikan bahagian teks yang melebihi bekas:

.container {
    width: 200px;
    height: 50px;
    background-color: #ccc;
    overflow: hidden;
}

Dalam kod di atas, lebar bekas div ialah 200px dan ketinggian ialah 50px. Kandungan teks adalah besar dan melebihi lebar dan tinggi bekas. Tetapi disebabkan penggunaan atribut overflow:hidden, kandungan berlebihan akan disembunyikan semata-mata.

Beyond Hide Contoh 2:

Contoh seterusnya akan menggunakan text-overflow:ellipsis dan bukannya text-overflow:clip:

<div class="container">
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
</div>

.container {
    width: 200px;
    height: 50px;
    background-color: #ccc;
    white-space: nowrap;
    overflow:hidden;
}

p {
    text-overflow: ellipsis;
}

Dalam contoh ini , kami menggunakan white-space:nowrap untuk menghalang teks daripada dibungkus. Kami juga menggunakan atribut overflow:hidden untuk menyembunyikan bahagian lebihan dan menggunakan text-overflow:ellipsis untuk memaparkan bahagian lebihan sebagai elips.

Ringkasan

Di luar fungsi penyembunyian ialah fungsi praktikal dalam CSS3. Ia membantu kami menyembunyikan kandungan teks di luar bekas dan menjadikan halaman lebih jelas dan lebih mudah dibaca. Contoh di atas hanyalah pengenalan ringkas kepada keupayaan CSS3 yang disembunyikan Jika anda memerlukan gaya dan kesan yang lebih kompleks, sila pelajari CSS3 secara mendalam dan kuasai lebih banyak petua dan teknik.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan css3 di luar fungsi tersembunyi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!