Wie implementiert man Ellipsen im Text für ein skalierbares Element?

Auslassungspunkte im Text: Erreichen des Mac-Stils

Herausforderung:

Auslassungspunkte implementieren ( " ...") in der Mitte des Textes innerhalb eines skalierbaren Elements. Die Auslassungspunkte sollten verschwinden, wenn die Elementbreite mit der Volltextbreite übereinstimmt.

Lösung:

1. Datenattribut zu HTML hinzufügen:

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

   <span data-original="your string here"></span>

   Nach dem Login kopieren

2. JavaScript-Ereignis-Listener:

   Fügen Sie Ereignis-Listener zu den Lade- und Größenänderungsereignissen des Elements hinzu. Diese Listener sollten eine JavaScript-Funktion auslösen, die:

   • den Originaltext aus dem data-*-Attribut abruft
   • den Text im innerHTML des span-Elements platziert

3. Ellipsenfunktion:

   Erstellen Sie eine Ellipsenfunktion, die den Text kürzt, wenn er eine bestimmte Länge überschreitet. Zum Beispiel:

   <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 Textlänge und Positionswerte nach Bedarf an.

4. Tooltip für Volltext:

   Für eine bessere Barrierefreiheit sollten Sie erwägen, den Auslassungspunkten ein Abbr-Tag mit einem Tooltip hinzuzufügen, der den vollständigen Text anzeigt:

   <code class="html"><abbr title="full string">...</abbr></code>

   Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie implementiert man Ellipsen im Text für ein skalierbares Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!