css tanpa pemisah baris

Dalam reka bentuk web, CSS (Cascading Style Sheets) ialah bahagian penting. CSS boleh mengawal reka letak, gaya dan tingkah laku halaman web. Salah satu sentuhan penggayaan asas ialah cara pembalut teks. Secara lalai, apabila teks sampai ke penghujung baris, penyemak imbas secara automatik membungkus ke baris seterusnya. Walau bagaimanapun, kadangkala kita perlu memaparkan teks tanpa pemisah baris Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan pemisah baris.

1. Atribut ruang putih

Terdapat atribut ruang putih dalam CSS, yang menentukan cara teks dalam elemen diproses, termasuk ruang dan pemisah baris. Secara lalai, nilai atribut ruang putih adalah normal, yang bermaksud bahawa baris akan dibalut secara automatik apabila ruang atau aksara baris baharu ditemui. Walau bagaimanapun, kita boleh mencapai kesan tiada pembalut baris dengan menetapkan nilai sifat ini.

1.white-space:normal

Secara lalai, nilai atribut ruang putih adalah normal, yang bermaksud bahawa teks dalam elemen akan menemui ruang, tab, baris baharu, dsb. Secara automatik balut garisan semasa menandakan. Jika anda ingin mencapai kesan tiada pembalut baris, anda perlu menetapkan nilai atribut kepada nowrap, seperti yang ditunjukkan di bawah:

p {
  white-space: nowrap;
}

Maksud kod ini ialah untuk menetapkan teks dalam elemen p kepada tidak membalut .

2. white-space:pre

Selain nowrap, atribut ruang putih mempunyai nilai pilihan lain, seperti pra. Apabila nilai atribut ruang putih adalah pra, penyemak imbas akan memaparkan teks dalam elemen dalam cara yang dipraformat, termasuk ruang, tab, baris baharu, dsb. Jika anda ingin menggunakan nilai atribut ini, anda hanya perlu menukar kod seperti berikut:

p {
  white-space: pre;
}

3. white-space:pre-wrap

Nilai lain ialah pra -bungkus, yang Anda boleh memaksa beberapa ruang yang telah diformatkan atau pemisah baris sambil mengekalkan pemisah baris semula jadi. Sebagai contoh, kod berikut akan menambah dua ruang antara setiap perkataan:

p {
  white-space: pre-wrap;
  word-wrap: break-word;
  word-spacing: 2px;
}

Apabila menggunakan atribut pra-balut, kita juga boleh menetapkan atribut word-wrap dan atribut word-spacing untuk mengawal lagi paparan teks .

2. Atribut text-overflow

Selain atribut white-space, terdapat juga atribut CSS yang biasa digunakan untuk mencapai tiada pemisah baris ialah text-overflow. Atribut ini digunakan untuk memotong teks yang terlalu panjang dalam elemen sebaris atau elemen blok dan mewakilinya dengan elipsis, mencapai kesan tiada pemisah baris pada tahap tertentu. Atribut

text-overflow mempunyai tiga nilai pilihan:

1. ellipsis: ellipsis
2. klip: truncate text
3. string: custom character String

Kod berikut menunjukkan cara menggunakan atribut limpahan teks untuk memotong teks yang terlalu panjang dan memaparkannya dengan elipsis:

p {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Dalam contoh ini, kami mula-mula memotong elemen Tetapkan lebar kepada 150 piksel dan kemudian tetapkan sifat ruang putih kepada nowrap supaya teks tidak dibalut. Seterusnya, tetapkan atribut limpahan kepada tersembunyi supaya bahagian teks yang melangkaui sempadan elemen disembunyikan. Akhir sekali, tetapkan sifat limpahan teks kepada elipsis supaya teks yang dipotong muncul sebagai elips.

3. Atribut patah perkataan

Atribut patah perkataan digunakan untuk mengawal cara teks dibalut. Ambil perhatian bahawa ia hanya berkesan untuk bahasa Inggeris dan teks lain yang perkataannya dipisahkan oleh ruang, dan tidak berfungsi untuk teks Cina dan teks lain tanpa spasi. Atribut

word-break mempunyai tiga nilai pilihan:

1. normal: Gunakan peraturan pemisah baris lalai, iaitu perkataan tidak akan dipecahkan kepada dua baris atau lebih.
2. pecah-semua: Akan memecahkan teks dalam perkataan.
3. keep-all: Hanya putuskan baris antara aksara utama (seperti kanji, katakana dan suku kata tani).

Kod berikut menunjukkan cara menggunakan pemecahan perkataan untuk mengawal cara pemecahan teks:

p {
  width: 100px;
  word-break: break-all;
}

Dalam contoh ini, kami menetapkan lebar elemen p kepada 100 piksel, dan kemudian Tetapkan sifat pecah perkataan kepada pecah-semua untuk memecahkan teks dalam perkataan.

Ringkasan

Di atas ialah kaedah pembalut bukan baris CSS yang diperkenalkan dalam artikel ini, termasuk atribut ruang putih, atribut limpahan teks dan atribut pecah perkataan. Dalam reka bentuk web sebenar, kami boleh menggunakan atribut ini secara fleksibel mengikut keperluan khusus untuk mencapai gaya halaman dan kesan reka letak.

Atas ialah kandungan terperinci css tanpa pemisah baris. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!