Ellipsis limpahan teks boleh dilaksanakan melalui CSS. Gunakan ruang putih: nowrap, limpahan: tersembunyi, dan teks-overflow: ellipsis untuk satu baris; Gunakan paparan: -WebKit-box, -Webkit-box-orient: menegak, dan -webkit-line-clamp untuk mengawal bilangan baris dan bekerjasama dengan limpahan: tersembunyi. 1. Satu baris perlu menetapkan lebar, jika tidak, ia tidak akan berkuatkuasa; 2. Pelbagai baris perlu menentukan bilangan baris dan bergantung pada sokongan penyemak imbas WebKit; 3. Masalah biasa termasuk saiz bekas tidak terhad, teks tidak diluaskan, gangguan susun atur atau kata-kata yang mempengaruhi pengiraan; 4. Perhatikan situasi kelebihan seperti paparan ralat teks pendek, pemotongan tanda baca, dan kesan fon dinamik pada mudah alih.

Ellipsis overflow teks adalah cara yang kemas untuk mengendalikan teks yang tidak sesuai di dalam bekasnya. Daripada membiarkan teks lari atau bungkus dengan canggung, anda boleh menunjukkan ellipsis ( ... ) untuk menunjukkan terdapat lebih banyak kandungan. Ia amat berguna dalam reka bentuk UI untuk perkara seperti tajuk utama, butang, atau menu navigasi.

Persediaan Asas: Ellipsis Single Line

Untuk memohon ellipsis mudah pada satu baris, anda memerlukan beberapa sifat CSS yang bekerja bersama:

• white-space: nowrap -menghalang teks daripada membungkus
• overflow: hidden - menyembunyikan sebarang teks yang melampaui bekas
• text-overflow: ellipsis -menambah ... di mana teks dipotong

 .Ellipsis {
  ruang putih: nowrap;
  Limpahan: Tersembunyi;
  Teks-overflow: ellipsis;
}

Ini berfungsi dengan baik apabila elemen anda mempunyai lebar yang ditetapkan - sama ada tetap (seperti 200px ) atau saudara (seperti 100% ). Tanpa lebar yang ditetapkan, bekas mungkin berkembang untuk menyesuaikan semua teks, dan tiada ellipsis akan muncul.

Ellipsis multi-line (cara praktikal)

CSS tidak mempunyai harta terbina dalam untuk ellipsis berbilang baris seperti yang dilakukan untuk baris tunggal. Tetapi anda boleh mencapainya menggunakan -webkit-line-clamp , yang menghadkan bilangan garisan yang dipaparkan sebelum memotong dengan ellipsis.

Inilah cara melakukannya:

 .multi-line-ellipsis {
  paparan: -WebKit -box;
  -Webkit-box-orient: menegak;
  -Webkit-line-clamp: 3;
  Limpahan: Tersembunyi;
}

Kaedah ini menggunakan logik berasaskan Flexbox di dalam pelayar WebKit (seperti Chrome dan Safari), jadi ia disokong secara meluas hari ini. Perlu diingat:

• Anda mesti memasukkan kedua-dua -webkit-box-orient: vertical dan display: -webkit-box
• Ini hanya berfungsi apabila ibu bapa mempunyai ketinggian yang ditetapkan atau ketika line-clamp digunakan

Anda boleh menyesuaikan nombor dalam -webkit-line-clamp untuk mengawal berapa banyak baris yang ditunjukkan sebelum ellipsis bermula.

Apabila ia mungkin tidak berfungsi

Kadang -kadang ellipsis tidak akan muncul walaupun anda telah menulis CSS yang betul. Berikut adalah sebab biasa mengapa:

• ? Elemen tidak dikekang lebar atau ketinggian
• ? Teks tidak meluap (cuba mengurangkan ruang atau meningkatkan saiz fon sementara)
• ? Gaya susun atur lain seperti flex atau grid mengganggu rendering dalaman
• ? Menggunakan word-break: break-all mungkin mempengaruhi bagaimana limpahan dikira

Jika anda menghadapi masalah, cuba tambah warna latar belakang atau sempadan ke bekas untuk melihat sempadannya dengan lebih baik.

Beberapa kes kelebihan untuk diperhatikan

Terdapat beberapa butiran kecil yang boleh perjalanan orang:

• Ellipsis mungkin tidak muncul dengan betul dengan teks yang sangat pendek - kadang -kadang ia menunjukkan tanpa perlu
• Dalam beberapa kes, tanda baca di hujung garisan dipotong sebelum perkataan sebenar
• Pada peranti mudah alih, zum atau saiz teks dinamik dapat mempengaruhi bagaimana limpahan limpahan

Satu helah adalah untuk menambah sedikit padding atau menggunakan box-sizing: border-box supaya pengiraan limpahan termasuk sempadan dan padding.

Pada dasarnya itu sahaja.

Atas ialah kandungan terperinci Melaksanakan ellipsis limpahan teks dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!