Bagaimana untuk mengelakkan tanda sempang menggunakan limpahan teks-Soal Jawab Rangkaian PHP Cina

Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Bagaimana untuk mengelakkan tanda sempang menggunakan limpahan teks

P粉464208937 2023-09-03 15:00:49

485

Saya cuba menetapkan bilangan baris maksimum untuk beberapa tajuk, tetapi masalahnya ialah kadangkala baris berakhir dengan tanda sempang. Apa yang saya perlukan ialah jika sesuatu perkataan itu perlu dipecahkan, ia hendaklah disembunyikan sepenuhnya dan elips diletakkan selepas perkataan sebelumnya.

Kod ini menunjukkan masalah:

#head { lebar: 300px; saiz fon: 20px; paparan: -webkit-box !penting; warna: #000000 !penting; limpahan teks: elipsis !penting; -webkit-line-clamp: 4 !penting; -webkit-box-orient: menegak !penting; limpahan: tersembunyi !penting; }

   Lorem Ipsum hanyalah teks tiruan bagi industri pencetakan dan penyusunan huruf Lorem Ipsum telah menjadi teks tiruan standard industri sejak tahun 1500-an, apabila pencetak yang tidak dikenali mengambil galley jenis dan berebut-rebut untuk membuatnya.

Terdapat patah perkataan "pernah", bolehkah saya menghalang perkara ini daripada berlaku?

P粉464208937

membalas semua (1)

P粉2311124372023-09-04 10:19:09 Tingkat 1

Untuk menyembunyikan sepenuhnya tanda sempang dan meletakkan elipsis selepas perkataan sebelumnya, anda boleh menggunakan JavaScript untuk memanipulasi kandungan teks. Berikut ialah contoh cara mengubah suai kod anda untuk mencapai ini:

function truncateText(element, maxLength) { const text = element.innerText; if (text.length <= maxLength) return; const truncatedText = text.slice(0, maxLength); const lastSpaceIndex = truncatedText.lastIndexOf(' '); element.innerText = truncatedText.slice(0, lastSpaceIndex) + '...'; } const headlineElement = document.getElementById('headline'); truncateText(headlineElement, 100);

#head { width: 300px; font-size: 20px; display: -webkit-box !important; color: #000000 !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a

Dalam kod ini, fungsi JavaScripttruncateTextdigunakan untuk memotong kandungan teks apabila ia melebihi panjang maksimum yang ditentukan. Fungsi ini mencari aksara ruang terakhir dalam panjang maksimum dan menggantikan teks yang tinggal dengan elips.

Anda boleh melaraskan parametermaxLengthkepada bilangan aksara yang dikehendaki sebelum menambah elipsis.