Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk melaksanakan paparan html tanpa pemisah baris

Bagaimana untuk melaksanakan paparan html tanpa pemisah baris

PHPz
PHPzasal
2023-04-21 14:13:163972semak imbas

Paparan HTML tanpa pembalut baris

Dalam HTML, teks dibalut secara automatik secara lalai Ia akan membalut secara automatik apabila ia menemui tepi tetingkap penyemak imbas atau lebar yang ditetapkan bungkus. Bagaimana?

Berikut ialah beberapa cara untuk mencapai paparan tanpa pemisah baris:

  1. Gunakan teg

HTML Teg bukan standard, yang menghalang teks daripada dibalut secara automatik.

Contohnya:

<nobr>这是一段不换行的文字</nobr>

Kesan yang dipaparkan dalam penyemak imbas ialah: ini ialah sekeping teks tanpa pemisah baris.

Walau bagaimanapun, perlu diambil perhatian bahawa teg telah ditamatkan dalam HTML5 dan tidak lagi disyorkan.

  1. Gunakan sifat ruang putih CSS

Sifat ruang putih dalam CSS boleh mengawal cara aksara ruang putih dalam elemen dipaparkan. Ia mempunyai beberapa nilai sepunya:

  • biasa: peraturan melanggar baris biasa.
  • nowrap: Teks tidak boleh dibalut melainkan teg <br> ditemui.
  • pra: Kekalkan jujukan ruang putih, tetapi balut seperti biasa (hanya apabila menemui teg <br> atau aksara baris baharu yang dinyatakan secara eksplisit).
  • pra-bungkus: Kekalkan jujukan ruang putih, tetapi balut garisan seperti biasa.
  • pra-baris: gabungkan jujukan ruang putih, tetapi balut seperti biasa (hanya apabila menemui teg <br> atau baris baharu yang dinyatakan secara eksplisit).

Contohnya:

<p style="white-space:nowrap;">这是一段不换行的文字</p>

Kod di atas boleh menjadikan teks dipaparkan tanpa dibalut.

Jika anda mahu teks yang terkandung dalam elemen tidak dibalut, anda boleh menambah white-space:nowrap;

  1. Gunakan sifat limpahan teks CSS

Sifat limpahan teks dalam CSS boleh menentukan perkara yang perlu dilakukan apabila teks melimpahi bekas. Ia mempunyai nilai sepunya berikut:

  • klip: potong teks dan bahagian limpahan tidak dipaparkan.
  • elipsis: Gantikan bahagian limpahan dengan elipsis.
  • rentetan: Gantikan bahagian limpahan dengan rentetan yang ditentukan.

Contohnya:

<p style="width:100px;overflow:hidden;text-overflow:ellipsis;">这是一段会溢出的文字,被省略号替代。</p>

Kod di atas menetapkan lebar bekas teks kepada 100px, dan bahagian yang melimpah digantikan dengan elips supaya teks tidak dibalut.

Perlu diambil perhatian bahawa atribut limpahan teks hanya akan berkuat kuasa apabila ruang putih ditetapkan kepada nowrap atau pra-bungkus.

Ringkasan

Tiga kaedah di atas boleh mencapai paparan pembalut bukan baris dalam HTML, tetapi disyorkan untuk menggunakan sifat ruang putih CSS kerana ia mematuhi piawaian dan boleh mencapai bukan -pembungkusan baris , juga boleh mengawal pembungkusan teks. Anda juga harus cuba mengelak daripada menggunakan teg

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan paparan html tanpa pemisah baris. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn