Wie kann ich die Ellipsenkürzung in einem skalierbaren Textelement implementieren?

Abschneiden von Auslassungspunkten bei der Änderung der Textgröße

Das Abschneiden von Text mit Auslassungspunkten („...“) in der Mitte des Inhalts kann die Lesbarkeit verbessern, wenn UI-Elemente haben variable Breiten. Das Erreichen dieses Effekts stellt eine Herausforderung dar, bei der die Auslassungspunkte verschwinden sollten, wenn der Text vollständig angezeigt wird.

So implementieren Sie Auslassungspunkte innerhalb eines skalierbaren Elements:

1. Verwenden Sie ein benutzerdefiniertes Datenattribut:

   • In HTML weisen Sie den vollständigen Text einem benutzerdefinierten Datenattribut zu:

2. Ereignis-Listener festlegen:

   • Ereignis-Listener zum Laden und Ändern der Größe hinzufügen, die eine JavaScript-Funktion auslösen, um das innereHTML des zu füllen span-Tag mit dem im Datenattribut gespeicherten Originaltext.

3. Ellipsenfunktion:

   • Definieren Sie a JavaScript-Funktion (z. B. „start_and_end“) zum Abschneiden des Textes:

     <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. 35, 20, 10) nach Bedarf für verschiedene Objekte und Schriftarten an.

4. Dynamische Interpolation:

   • Erwägen Sie die Verwendung dynamischer Interpolation, um die geeignete Anzahl der anzuzeigenden Zeichen basierend auf der Schriftgröße und der Elementbreite zu bestimmen .

5. Barrierefreiheit des Tooltips:

   • Fügen Sie den Auslassungspunkten ein Abbr-Tag hinzu, um einen Tooltip mit dem vollständigen Text zu aktivieren, wenn schwebe darüber.

Durch die Implementierung dieser Schritte können Sie Text mit Auslassungspunkten in der Mitte eines Textelements effektiv abschneiden und sicherstellen, dass er verschwindet, wenn das Element vollständig ausgestreckt ist Breite des Textes.

Das obige ist der detaillierte Inhalt vonWie kann ich die Ellipsenkürzung in einem skalierbaren Textelement implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!