Bagaimana untuk menghalang elemen daripada membungkus dalam css

Dalam reka bentuk web, kadangkala kita perlu menghalang beberapa elemen daripada membungkus, tetapi untuk memaparkan semuanya dalam satu baris Dalam kes ini, kita perlu menggunakan CSS. Seterusnya, artikel ini akan memperkenalkan anda kepada cara menggunakan CSS untuk menghalang elemen daripada membalut.

1. Atribut ruang putih

Atribut ruang putih ialah salah satu sifat CSS yang mengawal ruang dan pemisah baris dalam elemen. Dengan menetapkan atribut ruang putih, kita boleh menghalang elemen daripada membalut atau mengekalkan pembalut.

1 Tetapkan elemen untuk tidak membalut

Jika anda mahu teks dalam elemen dipaparkan pada baris yang sama, anda boleh menetapkan atribut ruang putih kepada nowrap, seperti yang ditunjukkan di bawah :

div{
    white-space: nowrap;
}

Kod di atas bermakna teks dalam elemen div tidak akan dibalut.

2. Kekalkan pemisah baris

Jika anda ingin mengekalkan pemisah baris dalam elemen, anda boleh menetapkan atribut ruang putih kepada pra atau pra bungkus, seperti yang ditunjukkan di bawah:

div{
    white-space: pre;
}

div{
    white-space: pre-wrap;
}

2. Atribut paparan

Selain atribut ruang putih, kita juga boleh menggunakan atribut paparan untuk mencapai kesan elemen tidak membalut. Terdapat dua nilai yang tersedia untuk atribut paparan: inline dan inline-block.

1.sebaris

Tetapkan atribut paparan elemen kepada sebaris, supaya elemen dan teks boleh dipaparkan pada baris yang sama, seperti ditunjukkan di bawah:

span{
    display: inline;
}

Kod di atas mewakili Kedua-dua elemen span dan teks dipaparkan pada baris yang sama.

2.inline-block

Tetapkan atribut paparan elemen kepada inline-block, yang membolehkan elemen dan teks dipaparkan pada baris yang sama, tetapi anda boleh menetapkan lebar dan ketinggian elemen, seperti yang ditunjukkan di bawah :

div{
    display: inline-block;
    width: 100px;
    height: 50px;
}

Kod di atas bermakna elemen div dan teks dipaparkan pada baris yang sama, dan lebar dan ketinggian elemen ditetapkan.

3. Atribut limpahan

Kadangkala, teks yang panjang akan menyebabkan elemen dibalut secara automatik. Jika anda ingin menghalang elemen daripada membalut, anda boleh menggunakan atribut limpahan. Atribut limpahan mempunyai dua nilai: kelihatan dan tersembunyi.

1.visible

Tetapkan atribut limpahan elemen kepada kelihatan, yang bermaksud kandungan elemen dibenarkan melimpahi kotak elemen, seperti ditunjukkan di bawah:

div{
    overflow: visible;
}

2.tersembunyi

Tetapkan atribut limpahan elemen kepada tersembunyi, yang bermaksud untuk menghalang kandungan elemen daripada melimpahi kotak elemen, seperti ditunjukkan di bawah:

div{
    overflow: hidden;
}

Di atas adalah tiga cara untuk menggunakan CSS untuk menghalang elemen daripada membalut: sifat ruang putih, sifat paparan dan sifat limpahan. Memilih kaedah yang berbeza dalam keadaan yang berbeza boleh mencapai kesan paparan yang lebih baik pada halaman web.

Atas ialah kandungan terperinci Bagaimana untuk menghalang elemen daripada membungkus dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!