Bagaimana untuk mengelakkan tanda sempang menggunakan limpahan teks
P粉464208937
2023-09-03 15:00:49
<p>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. </p>
<p>Kod ini menunjukkan masalah: </p>
<p>
<pre class="brush:css;toolbar:false;">#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;
}</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<div id="head">
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.
</div>
</html></pre>
</p>
<p>Terdapat patah perkataan "pernah", bolehkah saya menghalang perkara ini daripada berlaku? </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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; }<div id="head"> <span id="headline"> 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 </span> </div>Dalam kod ini, fungsi JavaScript
truncateTextdigunakan 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 parameter
maxLengthkepada bilangan aksara yang dikehendaki sebelum menambah elipsis.