Tanpa basa-basi lagi, mari kita mulai dengan kodenya!
1. Hanya tampilkan satu baris teks lalu sembunyikan dan hilangkan
// Hanya tampilkan satu baris teks lalu hilangkan .element {
lebar: 300 piksel; /* Perlu menetapkan lebar tetap */
white-space: nowrap; /* Memaksa tampilan satu baris tanpa pembungkusan baris */
overflow: tersembunyi; /* Menyembunyikan bagian di luar kotak */
text-overflow: elipsis; /* Menampilkan elips secara berlebihan */
}2. Tampilkan jumlah baris teks yang ditentukan lalu sembunyikan dan hilangkan.
// Hilangkan setelah menampilkan teks multi-baris.element {
lebar: 300 piksel; /* Perlu menetapkan lebar tetap */
tampilan: -webkit-box; /* Gunakan tata letak kotak yang fleksibel */
-webkit-box-orient: vertikal; /* susunan vertikal */
-webkit-line-clamp: 3; /* Menampilkan tiga baris */
overflow: tersembunyi; /* Menyembunyikan bagian di luar kotak */
text-overflow: elipsis; /* Menampilkan elips secara berlebihan */
} Teks multi-baris dihilangkan dengan menggunakan display: -webkit-box; tata letak kotak fleksibel dan -webkit-line-clamp untuk mencapai pemotongan teks multi-baris.
Catatan: Metode ini cocok untuk browser inti WebKit (seperti Chrome, Safari, dll.). Untuk browser lain, dukungan polyfill tambahan mungkin diperlukan.
Solusi lainnya
1. Gunakan JavaScript untuk menghitung tinggi konten teks secara dinamis dan memotongnya.
2. Gunakan perpustakaan yang ada: seperti: Clamp.js
Clamp.js: Pustaka ringan untuk pemotongan teks multi-baris lintas browser.
//Satu baris $clamp(myHeader, {clamp: 1});
//Beberapa baris $clamp(myHeader, {clamp: 3});
//Menghitung jumlah baris secara otomatis berdasarkan ketinggian yang tersedia $clamp(myParagraph, {clamp: 'auto'});
//Menghitung jumlah garis secara otomatis berdasarkan tinggi tetap $clamp(myParagraph, {clamp: '35px'}); 3. CSS Fallback (solusi kompatibilitas parsial)
Untuk beberapa browser, meskipun tidak ada dukungan langsung untuk atribut -webkit-line-clamp , kita dapat menggabungkannya dengan beberapa CSS sederhana untuk mencapai efek perkiraan.
.elemen {
tampilan: blok; /* Tampilkan sebagai blok */
overflow: tersembunyi; /* Sembunyikan konten berlebih */
text-overflow: elipsis; /* Menampilkan elips secara berlebihan */
tinggi garis: 1,5em; /* Tetapkan tinggi garis */
tinggi maksimal: 4,5em; /* Tinggi maksimum 3 baris, 3 baris * tinggi 1,5 baris = 4,5em */
spasi putih: normal; /* mempertahankan pembungkusan teks normal */
}Meskipun skema ini tidak dapat menghasilkan pemotongan multi-baris yang tepat dalam semua kasus, skema ini masih cocok untuk mendukung tampilan penghilangan teks multi-baris dasar.
Demikianlah artikel tentang menyembunyikan dan menampilkan elips setelah teks CSS melebihi batas dan solusi kompatibilitas browser lainnya. Untuk teks CSS terkait lainnya yang melebihi konten tersembunyi, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait di bawah ini harap Anda akan lebih mendukung downcodes.com di masa mendatang!