Bagaimana untuk mencapai teks css melebihi elips

Apabila mereka bentuk halaman web, selalunya perlu menggunakan elipsis teks Apabila ia melebihi panjang tertentu, teks berlebihan akan disembunyikan secara automatik dan diwakili oleh elips. Ini ialah cara yang elegan untuk memastikan halaman anda bersih dan kemas. Dalam CSS, kesan ini boleh dicapai menggunakan sifat limpahan teks.

Sifat limpahan teks membolehkan anda mengawal cara teks bertindak apabila ia melimpah ke bekas. Ia mempunyai tiga nilai atribut: klip, elipsis dan rentetan. Antaranya, yang paling biasa digunakan ialah elipsis, yang menunjukkan bahawa teks melebihi bekas dengan elipsis.

Selain itu, atribut text-overflow juga perlu digunakan bersama-sama dengan atribut white-space dan overflow. Atribut ruang putih menunjukkan cara teks dipaparkan dalam bekas, manakala atribut limpahan menentukan sama ada bar skrol harus muncul.

Berikut ialah cara menggunakan atribut text-overflow:

.element{
  white-space: nowrap; /*文本不换行*/
  overflow: hidden; /*超出长度隐藏*/
  text-overflow: ellipsis; /*省略号表示*/
}

Perlu diambil perhatian bahawa atribut text-overflow hanya boleh digunakan pada satu baris teks Jika anda ingin menerapkannya pada berbilang baris teks, anda boleh Pertimbangkan menggunakan JavaScript atau CSS3 untuk susun atur berbilang lajur.

Selain itu, apabila menggunakan atribut limpahan teks, anda juga perlu mempertimbangkan tahap sokongan penyemak imbas yang berbeza. Contohnya, dalam IE8 dan ke bawah, atribut ini tidak disokong, jadi kaedah lain perlu digunakan untuk mencapai kesan elipsis teks.

Ringkasnya, menggunakan atribut limpahan teks membolehkan anda mencapai kesan elipsis pada teks halaman web dengan mudah, menjadikan halaman kelihatan lebih bersih dan kemas. Untuk serasi dengan penyemak imbas yang berbeza, beberapa pernyataan bersyarat perlu ditambahkan pada kod.

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