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

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>

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>

Schritt 5: Tooltip (optional)

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

JavaScript html String for include Attribute Event function innerHTML