Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie implementiert man Ellipsen in abgeschnittenem Text mit veränderbaren Elementen?

Barbara Streisand
Freigeben: 2024-10-30 06:57:28
Original
189 Leute haben es durchsucht

How to Implement Ellipsis in Truncated Text with Resizable Elements?

Einfügung von Ellipsen in abgeschnittenen Text

Um Ellipsen in der Mitte eines Textes innerhalb eines skalierbaren Elements zu implementieren, sollten Sie den folgenden Ansatz in Betracht ziehen:

Schritt 1: Datenattributdeklaration

Fügen Sie in HTML den vollständigen Text in ein benutzerdefiniertes data-*-Attribut ein, wie zum Beispiel:

Schritt 2: Ereignis-Listener

Zuweisen Ereignis-Listener zum Laden und Ändern der Größe einer JavaScript-Funktion.

Schritt 3: Ellipsenfunktion

Verwenden Sie die folgende JavaScript-Funktion, um das Einfügen von Ellipsen zu verarbeiten:

<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>
Nach dem Login kopieren

Passen Sie die Werte (z. B. 20 und 10) für unterschiedliche Kürzungen an.

Schritt 4: InnerHTML-Einfügung

Lesen Sie innerhalb der Ereignis-Listener-Funktion die Originaldaten Attribut und platzieren Sie es im innerHTML des Span-Tags:

<code class="javascript">mySpan.innerHTML = start_and_end(mySpan.getAttribute("data-original"));</code>
Nach dem Login kopieren

Schritt 5: Tooltip (optional)

Um Benutzern einen Tooltip mit der vollständigen Zeichenfolge bereitzustellen , fügen Sie ein Abbr-Tag mit dem Titelattribut hinzu:

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!