Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie implementiert man Ellipsen im Text, um bei Breitenschwankungen präsent zu bleiben?

DDD
Freigeben: 2024-10-30 06:28:28
Original
696 Leute haben es durchsucht

How to Implement Ellipsis in Text to Maintain Presence Amidst Width Fluctuation?

Ellipsen im Text: Präsenz inmitten von Breitenschwankungen bewahren

Im Bereich des Webdesigns besteht die Notwendigkeit, Ellipsen anzuzeigen (.. .") innerhalb von Text, der unterschiedliche Breiten umfassen kann. Dies stellt eine Herausforderung dar, das gewünschte Verhalten zu erreichen, bei dem die Auslassungspunkte verschwinden, wenn die Textbreite die gesamte Zeichenfolge ausfüllt.

Um dieses Problem zu beheben, kann ein benutzerdefinierter Ansatz unter Verwendung von JavaScript und HTML implementiert werden. Innerhalb des HTML-Elements, das den Text enthält, kann die vollständige Zeichenfolge einem Datenattribut zugewiesen werden, wie zum Beispiel:

<span data-original="your string here"></span>
Nach dem Login kopieren

Sobald die Seite geladen wird, kann eine JavaScript-Funktion ausgelöst werden, um die ursprüngliche Zeichenfolge aus den Daten abzurufen Attribut und platzieren Sie es im inneren HTML-Code des Span-Tags. Hier ist ein Beispiel für eine Ellipsenfunktion:

<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

Diese Funktion schneidet die Zeichenfolge auf eine bestimmte Länge ab (passen Sie sie nach Bedarf basierend auf der Schriftgröße und dem gewünschten Abstand an) und fügt die Ellipsen in der Mitte ein.

Wenn die Größe des Elements geändert wird, kann der Größenänderungs-Ereignis-Listener die Auslassungspunkte-Funktion auslösen, um das gewünschte Verhalten beizubehalten. Bei Bedarf können die Funktionsparameter dynamisch gemacht werden, um unterschiedliche Objekte und Textlängen zu unterstützen.

Um die Zugänglichkeit in allen Browsern sicherzustellen, wird empfohlen, ein abbr-Tag in die Auslassungspunkte einzubauen, um einen Tooltip bereitzustellen, der die vollständige Zeichenfolge anzeigt :

<abbr title="simple tool tip">something</abbr>
Nach dem Login kopieren

Durch die Integration dieses JavaScript-basierten Ansatzes können die Auslassungspunkte nahtlos erscheinen und verschwinden, wenn die Elementbreite schwankt, was eine optisch ansprechende und funktionale Textanzeige in responsiven Designs gewährleistet.

Das obige ist der detaillierte Inhalt vonWie implementiert man Ellipsen im Text, um bei Breitenschwankungen präsent zu bleiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!