简体中文(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
P粉464208937 2023-09-03 15:00:49
0
1
525
<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>
P粉464208937
P粉464208937

membalas semua(1)
P粉231112437
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;
}
<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 truncateText digunakan 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 maxLength kepada bilangan aksara yang dikehendaki sebelum menambah elipsis.

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！