teks css melebihi elipsis

Teks di luar teknologi elips dalam CSS menjadikan perenggan panjang teks lebih mudah dibaca dan turut mencantikkan halaman web. Dalam artikel ini, kami akan melihat dengan lebih dekat beberapa bentuk elipsis yang berbeza dan cara mentakrifkannya mengikut keperluan anda.

1. Mengapa menggunakan elips?

Apabila teks melebihi lebar atau tinggi bekasnya dalam tapak web atau aplikasi, teknologi pemangkasan limpahan teks boleh digunakan untuk menyembunyikan lebihan dan memaparkan elipsis pada penghujung teks. Teknik ini menjadikan halaman lebih bersih dan mengelakkan kekacauan apabila teks melimpah.

2. Bagaimana untuk menggunakan elips dalam CSS?

Untuk menggunakan elips limpahan teks dalam CSS, anda perlu menggunakan tiga sifat berikut:

1. sifat limpahan teks

sifat limpahan teks ditakrifkan Perkara yang berlaku apabila teks melimpahi bekas. Dengan menggunakan sifat ini, anda boleh mencipta dan mentakrifkan jenis limpahan teks berikut:

*klip: Potong bahagian teks yang melimpah.

*elipsis: Paparkan elips di tepi bekas tempat teks melimpah.

2. atribut ruang putih

Atribut ruang putih digunakan untuk menentukan cara mengendalikan ruang putih dalam teks, termasuk ruang, baris baharu, dsb. Biasanya kami menggunakan tiga nilai berikut:

*biasa: Tiada pemisah baris dipaksa dan ruang antara perkataan dilaraskan secara automatik.

*nowrap: Jangan benarkan teks dibalut.

*pra-bungkus: Simpan teks dalam format yang telah ditetapkan Jika terdapat ruang dalam teks, pecahkannya kepada baris mengikut ruang.

3. atribut limpahan

Atribut limpahan mentakrifkan cara kandungan melimpah di dalam bekasnya. Biasanya kami menggunakan dua atribut berikut:

*kelihatan: membenarkan kandungan melimpah ke dalam bekas.

*tersembunyi: Kandungan tidak dibenarkan melimpahi bekas, dan bahagian yang berlebihan dipotong.

3. Beberapa gaya elipsis yang berbeza

1. Gaya elipsis satu baris

Apabila terdapat hanya satu baris teks yang perlu ditinggalkan, anda boleh menggunakan gaya elipsis satu baris:

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

2. Gaya elipsis berbilang baris

Apabila teks yang akan ditinggalkan mempunyai berbilang baris, anda boleh menggunakan gaya elipsis berbilang baris :

.ellipsis{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. Gunakan elipsis apabila melebihi bilangan aksara tertentu

.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

4. Ringkasan

Dengan menggunakan limpahan teks, ruang putih dan sifat limpahan CSS, kita boleh menggunakan beberapa gaya elipsis yang berbeza untuk mencipta dan menentukan jenis limpahan teks. Ini termasuk gaya elipsis satu baris, gaya elipsis berbilang baris dan penggunaan elipsis apabila bilangan aksara tertentu melebihi. Teknik ini boleh menjadikan halaman lebih kemas dan mengelakkan reka letak halaman yang mengelirukan apabila teks melimpah.

Atas ialah kandungan terperinci teks css melebihi elipsis. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!