Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Melaksanakan Elipsis yang Betul (Gaya Mac) dalam Elemen Boleh Diubah?

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

Susan Sarandon
Lepaskan: 2024-10-29 03:38:29
asal
829 orang telah melayarinya

How to Implement Proper Ellipsis (Mac Style) within Resizable Elements?

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan