css menghalang teks daripada membungkus

Dalam reka bentuk dan pembangunan web, kita biasanya perlu mengawal reka letak dan gaya elemen halaman Salah satu masalah yang lebih biasa dengan reka letak teks ialah cara menghalang teks daripada dibalut. Artikel ini akan memperkenalkan beberapa kaedah biasa dalam CSS untuk membantu anda menyelesaikan masalah ini. Atribut

1. Atribut ruang putih

white-space menentukan cara mengendalikan ruang putih dalam kotak elemen Ia mempunyai 5 nilai pilihan: normal, nowrap, pre, pre-wrap, pre-line. Kesannya ialah:

• normal: Nilai lalai, cantumkan lebihan ruang kosong, teks tidak akan dibalut, teks akan dibalut secara automatik jika ia tidak muat pada satu baris; : Tiada pemisah baris, yang bersamaan dengan menggabungkan ciri
dan
• ; nowrapnormalpre: mengekalkan ruang putih yang berlebihan, tiada penggabungan, tiada pemisah baris diperlukan, anda perlu menambah secara manual `
` ;
• pre
  : Simpan lebihan ruang putih, jangan gabungkan dan balut garisan secara automatik, garisan akan dibalut secara automatik >
• : Cantumkan ruang putih tambahan, dan teks akan berada pada satu baris Jika tidak muat, ia akan membalut secara automatik ke baris lain. pre-wrap
• Oleh itu, apabila kita perlu menghalang teks daripada membungkus secara automatik, kita boleh menggunakan pre-line.

div {
  white-space: nowrap;
}

Sudah tentu, jika anda ingin mengekalkan ruang putih yang berlebihan, anda juga boleh menggunakan nilai lain. Contohnya, jika anda mahu teks dipaparkan sepenuhnya pada satu baris, anda boleh menggunakan

. white-space: nowrap

div {
  white-space: pre;
}

2. atribut pemecah kata

white-space: preSelepas menetapkan atribut

, jika panjang teks melebihi lebar kotak, ia akan membalut secara automatik. Pada masa ini, anda perlu menggunakan atribut

untuk mengawal pemisahan baris teks Ia mempunyai tiga nilai pilihan:

,

dan white-space. Kesannya ialah: word-breaknormalbreak-allkeep-all: nilai lalai, pemisah baris antara perkataan mengikut peraturan pemecahan perkataan standard; pertimbangkan sebarang peraturan untuk pemecahan baris dalam perkataan Bahasa Inggeris;

• Oleh itu, anda boleh menetapkan nilai atribut normal kepada
untuk mengelakkan teks daripada dibalut secara automatik.

• div {
    white-space: nowrap;
    word-break: keep-all;
  }

  break-all3. Atribut limpahan
• Dalam sesetengah kes, walaupun reka letak teks yang betul ditetapkan melalui atribut keep-all dan
, panjang teks mungkin melebihi lebar kotak . Pada masa ini, anda perlu menggunakan atribut

untuk mengawal kesan limpahan teks. Atribut

mempunyai 4 nilai pilihan: word-break, keep-all,

,

. Kesannya ialah:

white-spaceword-break: Nilai lalai, tiada pemprosesan dilakukan, membenarkan kandungan di luar julat kotak dipaparkan di luar kotak; tersembunyi , tidak kelihatan; overflowoverflowvisible: Paparkan bar skrol, pengguna boleh melihat bahagian lebihan melalui bar skrol;: Paparkan bar skrol mengikut keperluan sebenar . hiddenscrollautoJika anda mahu teks dipaparkan pada satu baris tanpa pembalut baris automatik dan bahagian limpahan tersembunyi, anda boleh menggunakan atribut

dan

bersama-sama.

• div {
    white-space: nowrap;
    overflow: hidden;
  }

  visible4. atribut text-overflow
• Apabila menggunakan atribut hidden untuk menyembunyikan bahagian limpahan teks, ia mungkin menyebabkan pengguna tidak melihat kandungan teks yang lengkap. Pada masa ini, anda boleh menggunakan atribut
untuk mengawal kesan limpahan teks. Atribut
• mempunyai dua nilai pilihan: scroll,
. Kesannya ialah:
• auto

: potong teks dan sembunyikan lebihan tanpa menambah elips; simbol (

). white-spaceoverflow

Oleh itu, anda boleh memotong teks yang terlalu panjang dan menambah elips dengan menetapkan nilai atribut

kepada

.

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

overflow: hidden5. Gunakan elemen pseudo text-overflowtext-overflowSelain kaedah di atas, anda juga boleh mengawal teks untuk tidak membalut secara automatik dengan menggunakan elemen pseudo dalam CSS. Sebagai contoh, anda boleh menggunakan "

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