Bagaimana untuk menetapkan teks untuk tidak membungkus dalam css

Dalam reka bentuk web, teks ialah salah satu elemen yang paling penting. Bagaimana untuk menjadikan teks menyampaikan kesan terbaik pada halaman adalah persoalan yang perlu kita fikirkan. Cara menghalang teks daripada membungkus adalah salah satu masalah yang lebih biasa. Artikel ini akan meneroka cara mengawal teks supaya tidak membungkus CSS.

1. Atribut ruang putih

Atribut ruang putih ialah atribut penting dalam CSS dan digunakan untuk mengawal cara aksara ruang putih dalam elemen diproses. Ia terutamanya termasuk nilai berikut:

1. biasa

Ini ialah nilai lalai, yang bermaksud bahawa aksara kosong akan diabaikan oleh penyemak imbas Jika terdapat aksara kosong berturut-turut , pelayar Penyemak imbas hanya akan memaparkan aksara kosong.

2. pra

pra bermaksud mengekalkan aksara kosong, yang akan mengekalkan aksara kosong yang ditulis dalam HTML, yang akan menyebabkan aksara kosong dalam HTML dipaparkan pada halaman.

3. nowrap

nowrap bermakna pemisah baris tidak dibenarkan Jika ruang tidak mencukupi untuk memaparkan teks dalam baris, teks akan melimpahi skop unsur.

4. pra-balut

pra-bungkus bermaksud mengekalkan aksara ruang putih dalam HTML dan membenarkan pemisah baris.

5. pra-baris

pra-baris bermaksud aksara ruang putih dalam HTML dikekalkan, tetapi aksara ruang kosong berturut-turut diabaikan dan pemisah baris dibenarkan.

2. Atribut word-wrap

Atribut word-wrap digunakan untuk mengawal cara penyemak imbas memproses perkataan. Jika perkataan dalam baris terlalu panjang, lebar elemen akan meningkat melebihi lebar elemen induk, menjejaskan reka letak halaman.

1. biasa

Ini ialah nilai lalai, yang bermaksud penyemak imbas tidak akan memecahkan baris baharu dalam perkataan.

2. kata putus

kata putus akan memecahkan baris baharu dalam perkataan untuk mengelakkan perkataan itu daripada menjejaskan reka letak.

3. Penggunaan gabungan ruang putih dan balutan perkataan

Sifat ruang putih dan bungkus perkataan boleh digunakan bersama untuk mencapai kesan mengawal pembalut teks.

1. white-space:nowrap;

word-wrap:break-word;

Ini bermakna pemisah baris tidak dibenarkan, tetapi perkataan terlalu panjang apabila perkataan melebihi lebar unsur induk, pemisah baris dipecahkan dalam perkataan.

2. white-space:pre-wrap;

word-wrap:break-word;

Ini bermakna untuk mengekalkan aksara ruang kosong dalam HTML, dibenarkan Pecah baris, manakala pemecahan baris dalam perkataan.

Dengan menggabungkan berbilang nilai, kami boleh mencapai kesan kawalan yang lebih tepat.

Ringkasan:

Mengawal teks tanpa pembalut baris melalui CSS boleh dicapai dengan menggunakan atribut ruang putih dan atribut bungkus perkataan, digabungkan dengan berbilang nilai. Ini sangat penting untuk kesan susun atur tapak web. Jika anda ingin mengawal penjajaran menegak teks, penyembunyian limpahan teks dan kesan khas lain, anda juga boleh menggunakannya bersama-sama dengan sifat CSS yang lain. Hanya gunakannya secara fleksibel dan anda akan mendapat hasil dua kali ganda dengan separuh usaha dalam reka bentuk web.

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