


Bagaimana untuk Melaksanakan Elipsis dalam Teks untuk Elemen Boleh Diubah Saiz?
Oct 29, 2024 pm 08:33 PMElipsis dalam Teks: Mencapai Gaya Mac
Cabaran:
Melaksanakan elipsis ( " ...") di tengah-tengah teks dalam elemen boleh ubah saiz. Ellipsis sepatutnya hilang apabila lebar elemen sepadan dengan lebar teks penuh.
Penyelesaian:
-
Tambahkan Atribut Data pada HTML:
Dalam HTML, masukkan nilai teks penuh dalam atribut data-* tersuai, seperti:
1
<span data-original="your string here"></span>
Salin selepas log masuk -
Pendengar Acara JavaScript:
Tambahkan pendengar acara pada pemuatan dan ubah saiz acara elemen. Pendengar ini harus mencetuskan fungsi JavaScript yang akan:
- Mendapatkan semula teks asal daripada atribut data-*
- Letakkan teks dalam HTML dalaman bagi elemen span
-
Fungsi Ellipsis:
Buat fungsi elipsis yang memangkas teks jika ia melebihi panjang tertentu. Contohnya:
1
2
3
4
5
6
<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 masukSesuaikan panjang teks dan nilai kedudukan mengikut keperluan.
-
Petua alat untuk Teks Penuh:
Untuk kebolehaksesan tambahan, pertimbangkan untuk menambah tag abbr pada elipsis dengan petua alat yang memaparkan teks penuh:
1
<code
class
=
"html"
><abbr title="full string">...</abbr></code>
Salin selepas log masuk
Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Elipsis dalam Teks untuk Elemen Boleh Diubah Saiz?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar

Menjadikan Peralihan Svelte Khas pertama anda

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Muat naik fail dengan multer di node.js dan ekspres
