Bagaimana untuk menghalang teks daripada membungkus dalam css

Dalam pembangunan web, sering dijumpai bahawa keseluruhan perenggan teks perlu dipaparkan dalam sel atau bekas, tetapi teksnya terlalu panjang, mengakibatkan pemisah baris yang menjejaskan penampilan. Pada masa ini, kita boleh menggunakan kawalan gaya CSS untuk menghalang teks daripada membalut dan mencapai reka letak yang lebih cantik.

Berikut ialah beberapa cara untuk mengawal teks supaya tidak membungkus dalam CSS.

1. Atribut ruang putih

Dalam CSS, atribut ruang putih digunakan untuk mengawal reka letak teks. Secara lalai, nilai atribut ruang putih ialah "biasa", iaitu, apabila ia menemui aksara ruang putih seperti ruang, baris baharu, tab, dsb., ia akan membalut secara automatik dan tidak lagi menaip ke hadapan. Kita hanya perlu menetapkannya kepada "nowrap" supaya teks tidak akan dibalut. Contoh

adalah seperti berikut:

.container {
  white-space: nowrap;
}

Dalam kod di atas, .container mewakili bekas yang perlu digayakan Tetapkan white-space kepada nowrap untuk mengelakkan teks daripada pembalut.

2. Atribut limpahan

Cara lain untuk mengawal teks daripada pembalut ialah menggunakan atribut limpahan. Gunakan atribut ini untuk menyembunyikan atau menunjukkan bar skrol apabila kandungan dalam bekas melebihi skop bekas. Di sini, kita boleh menetapkan nilai limpahan kepada "tersembunyi", supaya teks anak sungai di luar skop bekas boleh disembunyikan, dan teks tidak akan dibungkus. Contoh

adalah seperti berikut:

.container {
  overflow: hidden;
}

Dalam kod di atas, .container mewakili bekas untuk kawalan gaya Tetapan overflow kepada hidden akan menghalang teks daripada membalut.

3. Atribut limpahan-teks

Dalam sesetengah kes, teks terlalu panjang tetapi tidak boleh disembunyikan sebahagian daripada teks perlu dipaparkan dan bahagian yang tidak dipaparkan diwakili oleh elipsis. Ini boleh digunakan dalam kes ini sifat limpahan teks. Gunakan atribut ini untuk memaparkan elips apabila teks melebihi panjang tertentu dan teks tidak akan dibalut. Contoh

adalah seperti berikut:

.container {
  overflow: hidden;   /* 必须要设置overflow属性值为“hidden” */
  white-space: nowrap;  /* 禁止文本换行 */
  text-overflow: ellipsis;  /* 超出容器大小的文本以省略号表示 */
}

Dalam kod di atas, .container mewakili bekas untuk kawalan gaya Tetapkan overflow kepada hidden dan white-space kepada nowrap dan text-overflow ditetapkan kepada ellipsis untuk menghalang teks daripada membalut dan memaparkan elips.

Ringkasan:

Di atas memperkenalkan tiga kaedah untuk mengawal teks supaya tidak membalut, menggunakan atribut ruang putih, atribut limpahan dan atribut limpahan teks. Kaedah mana yang hendak digunakan perlu dipilih berdasarkan keperluan khusus. Semasa proses pembangunan, demi keindahan dan kebolehbacaan, kita perlu menguasai kemahiran asas kawalan gaya CSS ini.

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