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:

Quelle：php.cn

Vorheriger Artikel：Wie erreicht man gleiche Höhen für Karten in Bootstrap 4-Spalten? Nächster Artikel：Wie wähle ich Elemente mit IDs aus, die Metazeichen in jQuery enthalten?

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

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

2

1709

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

10

1867

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

1584

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

1494

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

1538

verwandte Themen

Mehr>

• So stellen Sie eine MySQL-Datenbank wieder her
• Wie viele Menschen können Sie mit Douyin großziehen?
• So verwenden Sie HTML für die Webnavigation
• Welche Netzwerksicherheitstechnologien gibt es?
• Was bedeutet Handy-Zweitkarte?
• So beheben Sie einen Skriptfehler
• Webservice-Aufruf
• So konvertieren Sie Ape in WAV