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>

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>

   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>

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!