Apakah elipsis dalam css tanpa pemisah baris?

Elipsis CSS ialah kesan yang sangat praktikal yang membolehkan teks yang lebih panjang dipaparkan dalam satu baris dan menambah elipsis pada penghujungnya. Ini mempunyai kesan yang sangat baik dalam mencantikkan reka letak dan meningkatkan pengalaman pengguna.

Dalam CSS, kami biasanya menggunakan limpahan teks untuk mencapai kesan elips. Walau bagaimanapun, dalam proses permohonan sebenar, kami akan mendapati bahawa jika teks yang dipaparkan dalam satu baris terlalu panjang, ia boleh menyebabkan kekeliruan reka letak dan situasi yang tidak memenuhi jangkaan kami.

Jika kami tidak mahu teks terlalu panjang dan menyebabkan masalah reka letak, kami boleh menggunakan atribut nowrap dalam CSS untuk melumpuhkan pembalut teks. Walaupun atribut ini tidak selalu digunakan, ia boleh mencapai kesan yang sangat praktikal dalam pembangunan sebenar.

Seterusnya, kami akan memperkenalkan secara terperinci cara menggunakan atribut nowrap.

Langkah pertama: Matikan pembalut teks

Sebelum menggunakan atribut nowrap, kita perlu mematikan pembalut teks. Dalam reka letak teks CSS, terdapat tiga pilihan untuk mematikan pembalut teks:

1. Gunakan atribut ruang putih

Atribut ruang putih boleh digunakan untuk mengawal kandungan unsur Cara teks dibalut. Terdapat nilai atribut berikut:

1) normal: nilai lalai, iaitu, tiada pemprosesan khas aksara ruang putih dan tiada sekatan pada pemisah baris dalam perkataan.

2) pra: Simpan aksara ruang kosong dan teks akan dibalut pada kedudukan dalam kod sumber.

3) nowrap: Tiada pembalut baris.

Kita perlu menetapkan ruang putih kepada nowrap untuk mengelakkan pembalut teks dalam elemen.

Kod contoh:

p {
  white-space: nowrap;
}

2. Menggunakan atribut patah perkataan

Atribut patah perkataan boleh digunakan untuk mengawal cara perkataan rosak. Terdapat nilai atribut berikut:

1) normal: nilai lalai, iaitu, menggunakan peraturan pembalut baris lalai.

2) simpan-semua: lumpuhkan pemisahan perkataan.

3) pecah-semua: Benarkan pemisah baris dalam perkataan.

Kita perlu menetapkan atribut pemecah kata kepada simpan-semua untuk memastikan perkataan itu utuh.

Kod sampel:

p {
  word-break: keep-all;
}

3. Menggunakan atribut limpahan

Apabila kandungan elemen melebihi skop bekas, kami boleh mengawal kandungan melalui kaedah limpahan atribut limpahan. Terdapat nilai atribut berikut:

1) kelihatan: nilai lalai, yang membenarkan kandungan dipaparkan di luar bekas.

2) tersembunyi: Sembunyikan kandungan di luar bekas.

3) auto: Tatal dan paparkan kandungan secara automatik.

4) tatal: Paksa bar tatal dipaparkan supaya kandungan di luar skop bekas boleh dilihat.

Kita perlu menetapkan atribut limpahan kepada tersembunyi untuk menyembunyikan kandungan di luar bekas.

Kod sampel:

div {
  overflow: hidden;
}

Langkah 2: Tambah elipsis

Langkah seterusnya ialah menambah elipsis. Kita perlu menggunakan atribut limpahan teks dan menetapkannya kepada elipsis, yang menambahkan elipsis pada penghujung teks.

Kod sampel:

p {
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

Ini melengkapkan kesan kami. Selepas menggunakan atribut nowrap, kandungan teks tidak akan dibalut secara automatik, tetapi akan dipaparkan dalam satu baris. Apabila teks melebihi skop bekas, bahagian tersembunyi digantikan dengan elips.

Perlu diingat bahawa selepas menggunakan atribut nowrap, kandungan teks akan menjadi sangat sempit, yang akan menyebabkan fon berkurangan dan sukar untuk dilayari. Oleh itu, apabila menggunakan atribut nowrap, anda perlu membuat pelarasan yang sesuai pada saiz fon.

Kesimpulan

Kesan elipsis dalam CSS boleh dipaparkan dalam satu baris dengan menggunakan atribut nowrap dan elipsis ditambahkan pada penghujungnya. Kesan ini sesuai untuk teks yang lebih panjang yang perlu mengekalkan kesan reka letak yang baik apabila dipaparkan. Perlu diingat bahawa apabila menggunakan atribut nowrap, saiz fon perlu dilaraskan dengan sewajarnya untuk mengelak daripada menjejaskan pengalaman pengguna.

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