Petua reka letak HTML: Cara menggunakan atribut limpahan untuk kawalan limpahan teks-html tutorial-php.cn

Petua reka letak HTML: Cara menggunakan atribut limpahan untuk kawalan limpahan teks

WBOY

Lepaskan： 2023-10-19 11:30:50

asal

1352 orang telah melayarinya

Petua reka letak HTML: Cara menggunakan atribut limpahan untuk kawalan limpahan teks

Kemahiran susun atur HTML: Cara menggunakan atribut limpahan untuk kawalan limpahan teks

Dalam pembangunan web, kadangkala kita sering menghadapi masalah kandungan teks yang terlalu panjang dan melimpah. Untuk mengawal limpahan ini dan menjadikan reka letak halaman web lebih cantik dan teratur, anda boleh menggunakan atribut limpahan CSS. Artikel ini akan memperkenalkan cara menggunakan atribut limpahan dan memberikan contoh kod khusus.

1. Peranan atribut limpahan

Atribut limpahan digunakan untuk mengawal cara kandungan elemen melimpah. Limpahan berlaku apabila kandungan elemen melebihi lebar atau ketinggian yang ditetapkan. Atribut limpahan boleh mengawal ungkapan limpahan ini dan biasanya mempunyai nilai berikut:

kelihatan: Kandungan tidak akan dipangkas dan akan melimpah di luar kotak elemen. Ini ialah nilai lalai.
tersembunyi: Kandungan dipangkas dan tidak kelihatan.
skrol: Kandungan dipangkas, tetapi bar skrol disediakan untuk melihat kandungan yang lain.
auto: Sediakan bar skrol secara automatik jika kandungan melimpah.

Apabila berurusan dengan limpahan kandungan teks, tersembunyi dan elipsis sering digunakan.

2. Gunakan tersembunyi untuk mengawal limpahan teks

Nilai tersembunyi bermaksud apabila kandungan elemen melimpah, ia akan dipangkas dan disembunyikan, menjadikannya tidak kelihatan. Dengan menetapkan atribut limpahan kepada tersembunyi, anda boleh mencapai kesan penyembunyian limpahan teks. Berikut ialah contoh kod:

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac nisi sed est hendrerit hendrerit nec at ipsum. Sed finibus diam urna, a convallis ex auctor non. Praesent ornare mi sed iaculis hendrerit. Sed vitae ipsum et nisi vestibulum tincidunt vel eu erat. Sed suscipit dui eu felis commodo aliquet.
    </div>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, div elemen kontena digunakan dan garis hitam pepejal dengan lebar 200px, ketinggian 100px dan sempadan 1px ditetapkan. Dengan menetapkan atribut limpahan kepada tersembunyi, apabila kandungan teks melimpah, bahagian yang berlebihan akan disembunyikan dan tidak akan dipaparkan. Ini mencapai kesan kawalan limpahan kandungan teks.

3. Gunakan elipsis untuk memaparkan elipsis apabila teks melimpah

Dalam sesetengah kes, kami ingin memaparkan elips apabila teks melimpah untuk mengingatkan pengguna bahawa terdapat lebih banyak kandungan untuk dilihat. Pada masa ini, anda boleh menggunakan sifat limpahan teks CSS dan kata kunci elipsis untuk mencapai ini. Berikut ialah contoh kod:

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac nisi sed est hendrerit hendrerit nec at ipsum. Sed finibus diam urna, a convallis ex auctor non. Praesent ornare mi sed iaculis hendrerit. Sed vitae ipsum et nisi vestibulum tincidunt vel eu erat. Sed suscipit dui eu felis commodo aliquet.
    </div>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, dengan menetapkan sifat limpahan teks kepada elipsis, apabila kandungan teks melimpah, bahagian yang berlebihan akan dipaparkan sebagai elips (...). Pada masa yang sama, dengan menetapkan atribut ruang putih kepada nowrap, teks dipaparkan dalam satu baris supaya elipsis boleh dipaparkan. Ini mencapai kesan memaparkan elipsis apabila teks melimpah.

Ringkasnya, menggunakan atribut limpahan untuk mengawal limpahan kandungan teks boleh menyelesaikan masalah limpahan dalam reka letak halaman web dengan berkesan. Mengikut keperluan sebenar, kesan kawalan limpahan yang berbeza boleh dicapai dengan memilih nilai limpahan yang sesuai dan menggabungkannya dengan atribut lain yang berkaitan. Saya harap anda mendapati contoh kod khusus yang disediakan dalam artikel ini membantu.

Atas ialah kandungan terperinci Petua reka letak HTML: Cara menggunakan atribut limpahan untuk kawalan limpahan teks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!