Bagaimana untuk mencapai tiada pemisah baris dalam css

CSS ialah bahasa helaian gaya yang biasa digunakan dalam pembangunan bahagian hadapan, digunakan untuk menetapkan reka letak, fon, warna, saiz dan gaya lain halaman web. Semasa menulis gaya CSS, kami sering menghadapi beberapa ayat panjang atau kod panjang yang memerlukan pemisah baris. Tetapi kadangkala kita tidak mahu membalut baris dan mahu ia kekal dipaparkan pada satu baris. Artikel ini akan memperkenalkan cara untuk mencapai tiada pemisah baris dalam kod CSS.

1. Mengapakah kod itu dibungkus secara automatik? Dalam kod, jika nilai atribut unsur terlalu panjang dan paparan tidak lengkap, kebanyakan penyemak imbas akan secara automatik membalut teks secara lalai. Tujuannya adalah untuk memudahkan pembacaan dan penyelenggaraan serta memastikan kebolehbacaan kod.

Sebagai contoh, berikut ialah kod CSS:

Jika salah satu nilai atribut terlalu panjang dan melebihi kawasan kelihatan editor atau penyemak imbas, ia akan secara automatik membungkus Ia menjadi kod berikut:

.container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #eee;
}

Walaupun ini lebih mudah dibaca, kita perlu menggunakan beberapa teknik khas untuk menangani situasi tertentu di mana kita perlu menjimatkan ruang atau memaksa tidak talian putus.

.container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #eee;
}

2. Penyelesaian untuk kod CSS tidak dibalut

Terdapat banyak teknik untuk tidak membalut kod CSS:

1. atribut ruang

Dalam CSS, kita boleh menggunakan atribut ruang putih untuk menetapkan kaedah pembalut teks. Atribut ini mempunyai tiga nilai: normal (nilai lalai), pra-baris dan nowrap.

biasa: gelagat lalai penyemak imbas, dilaraskan secara automatik mengikut ruang dan baris baharu.

• pra-baris: Pemisahan baris mengikut pemisah baris sebenar dalam teks.
• nowrap: Tiada pembalut baris.
• Oleh itu, jika kita mahu memaksa tiada pemisah baris dalam kod, kita boleh menetapkan atribut ruang putih kepada nowrap dalam helaian gaya.

Sebagai contoh, kod berikut boleh mengekalkan kandungan teks pada satu baris tanpa membalut. Ia mengatasi tetapan pembalut lalai, meninggalkan kandungan teks dalam kedudukan asalnya.

2. Gunakan atribut word-break

.text {
  white-space: nowrap;
}

Atribut pemecahan perkataan dalam CSS digunakan untuk menentukan kaedah pembalut baris automatik. Atribut ini mempunyai 4 nilai: normal (nilai lalai), break-all, keep-all dan break-word.

biasa: Balut garisan secara automatik berdasarkan ruang dan sempang.

• pecah-semua: Apabila perkataan terlalu panjang dan melebihi sempadan bekas, balut secara automatik ke baris seterusnya.
• simpan-semua: Elakkan pembalut perkataan dalam perkataan dan letakkan keseluruhan perkataan dalam bekas yang sempit.
• kata putus: Serupa dengan putus-semua, tetapi dalam beberapa kes tertentu akan mengekalkan keseluruhan perkataan pada baris yang sama.
• Oleh itu, jika kita mahu memaksa tiada pemisah baris dalam kod, kita boleh menetapkan atribut pemecahan perkataan untuk menyimpan-semua dalam helaian gaya.

Sebagai contoh, kod berikut boleh mengekalkan kandungan teks pada satu baris tanpa membalut. Ia mengatasi tetapan pembalut lalai, mengekalkan kandungan teks dalam kedudukan asalnya.

3 Gunakan atribut text-overflow

.text {
  word-break: keep-all;
}

Atribut text-overflow dalam CSS digunakan untuk menentukan cara bahagian di luar bekas teks dipaparkan. Sifat ini mempunyai 2 nilai: klip (nilai lalai) dan elipsis.

klip: klip teks, dan bahagian yang berlebihan akan disembunyikan.

• ellipsis: Gunakan elips untuk menggantikan bahagian yang berlebihan.
• Oleh itu, jika kita mahu memaksa tiada pemisah baris dalam kod dan memaparkan elipsis dalam bahagian yang berlebihan, kita boleh menetapkan atribut limpahan teks kepada elipsis dalam helaian gaya.

Sebagai contoh, kod berikut boleh menjadikan kandungan teks tidak dibalut, menyimpannya pada satu baris dan memaparkan elips di bahagian yang berlebihan. Ia mengatasi tetapan pembalut lalai, mengekalkan kandungan teks dalam kedudukan asalnya.

4. Gunakan atribut nowrap

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

Untuk memastikan elemen tidak membalut, terdapat atribut dalam CSS yang serupa dengan atribut ruang putih, dipanggil atribut nowrap. Atribut ini hanya mempunyai satu nilai: nowrap, yang bermaksud elemen dilarang daripada membalut.

Sebagai contoh, kod berikut boleh mengekalkan kandungan teks pada satu baris tanpa membalut. Ia mengatasi tetapan pembalut lalai, mengekalkan kandungan teks dalam kedudukan asalnya.

5 Gunakan atribut inline-block

.text {
  white-space: nowrap;
}

Dalam CSS, kita juga boleh menggunakan atribut display:inline-block untuk mengekalkan mod paparan elemen. Atribut ini membolehkan elemen dipaparkan pada baris yang sama tanpa membalut.

Sebagai contoh, kod berikut boleh mengekalkan kandungan teks pada satu baris tanpa membalut. Ia mengatasi tetapan pembalut lalai, mengekalkan kandungan teks dalam kedudukan asalnya.

6 Gunakan atribut ketinggian

.text {
  display: inline-block;
}

Dalam CSS, kita juga boleh menggunakan atribut ketinggian untuk menentukan ketinggian bekas. Jika ketinggian elemen ditakrifkan sebagai nilai tertentu, maka kandungannya tidak boleh membungkus secara automatik.

Sebagai contoh, kod berikut boleh mengekalkan kandungan teks pada satu baris tanpa membalut. Ia akan memaksa ketinggian bekas kepada 20px, mengekalkan kandungan teks dalam kedudukan asalnya.

3. Ringkasan

.text {
  height: 20px;
}

Sama ada kami mempertimbangkan untuk menjimatkan ruang atau atas sebab lain, kadangkala kami mungkin perlu memaksa tiada pemisah baris dalam CSS. Artikel ini memperkenalkan 6 teknik yang biasa digunakan, termasuk atribut ruang putih, atribut patah perkataan, atribut limpahan teks, atribut nowrap, atribut blok sebaris dan atribut ketinggian. Memilih atribut dan nilai yang sesuai bergantung pada senario dan keperluan aplikasi tertentu.

Walaupun kaedah ini pada asasnya melarang elemen daripada membalut secara automatik, senario yang berkenaan dan kaedah pelaksanaan bagi setiap kaedah adalah berbeza. Menguasai teknik ini boleh membantu kami mengurus helaian gaya CSS dengan lebih baik dan meningkatkan kebolehbacaan dan kebolehselenggaraan kod.

Atas ialah kandungan terperinci Bagaimana untuk mencapai tiada pemisah baris dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!