Bagaimana untuk Melaksanakan Ellipsis dalam Teks untuk Mengekalkan Kehadiran Di Tengah-tengah Turun Naik Lebar?

Elipsis dalam Teks: Mengekalkan Kehadiran Di Tengah-tengah Turun Naik Lebar

Dalam bidang reka bentuk web, keperluan timbul untuk memaparkan elips (".. .") dalam teks yang boleh menjangkau lebar yang berbeza-beza. Ini menimbulkan cabaran dalam mencapai gelagat yang diingini di mana elipsis hilang apabila lebar teks memuatkan rentetan penuh.

Untuk menangani perkara ini, pendekatan tersuai menggunakan JavaScript dan HTML boleh dilaksanakan. Dalam elemen HTML yang mengandungi teks, rentetan penuh boleh diberikan kepada atribut data, seperti:

<span data-original="your string here"></span>

Setelah halaman dimuatkan, fungsi JavaScript boleh dicetuskan untuk mendapatkan semula rentetan asal daripada data atribut dan letakkannya dalam HTML dalaman teg span. Berikut ialah contoh fungsi elipsis:

<code class="javascript">function start_and_end(str) {
  if (str.length > 35) {
    return str.substr(0, 20) + '...' + str.substr(str.length - 10, str.length);
  }
  return str;
}</code>

Fungsi ini memotong rentetan kepada panjang tertentu (laraskan mengikut keperluan berdasarkan saiz fon dan jarak yang dikehendaki) dan memasukkan elipsis di tengah.

Apabila elemen diubah saiz, pendengar acara mengubah saiz boleh mencetuskan fungsi elipsis untuk mengekalkan gelagat yang diingini. Jika perlu, parameter fungsi boleh dibuat dinamik untuk menyokong objek dan panjang teks yang berbeza.

Untuk memastikan kebolehaksesan merentas penyemak imbas, adalah disyorkan untuk memasukkan tag abbr dalam elipsis untuk menyediakan petua alat yang memaparkan rentetan penuh :

<abbr title="simple tool tip">something</abbr>

Dengan menyepadukan pendekatan berasaskan JavaScript ini, elipsis boleh muncul dan hilang dengan lancar apabila lebar elemen berubah-ubah, memastikan paparan teks yang menarik dan berfungsi secara visual dalam reka bentuk responsif.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Ellipsis dalam Teks untuk Mengekalkan Kehadiran Di Tengah-tengah Turun Naik Lebar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!