Bagaimana untuk Melaksanakan Elipsis yang Betul (Gaya Mac) dalam Elemen Boleh Diubah?

Pelaksanaan Elipsis yang Betul dalam Hati Teks (Gaya Mac)

Dalam mengejar pengalaman pengguna yang lancar, masalah elipsis teks pertengahan (".. .") memberikan cabaran. Matlamat kami adalah untuk melaksanakan ciri ini dalam elemen yang boleh diubah saiz, mengekalkan fungsinya semasa elemen berkembang.

Penyelesaian terletak pada pendekatan serampang dua mata. Pertama, tetapkan rentetan penuh kepada atribut data-* tersuai dalam HTML:

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

Kedua, gunakan JavaScript untuk membaca data ini dan laraskan HTML dalaman elemen secara dinamik sebagai tindak balas kepada memuatkan dan mengubah saiz peristiwa. Fungsi berikut menunjukkan pendekatan ini:

<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>

Nilai yang boleh disesuaikan membolehkan anda menyesuaikan diri dengan pelbagai objek, memastikan paparan optimum pada lebar yang berbeza. Tingkatkan pengalaman pengguna dengan memasukkan tag abbr pada elipsis atau petua alat, memberikan pengguna konteks tambahan semasa tuding:

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

Dengan menggunakan teknik ini dengan mahir, anda dengan yakin boleh menawarkan pengguna elipsis yang mantap dan menarik secara visual penyelesaian yang melengkapkan fleksibiliti elemen boleh ubah saiz.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Elipsis yang Betul (Gaya Mac) dalam Elemen Boleh Diubah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!