Heim > Web-Frontend > CSS-Tutorial > Code zum Ersetzen von CSS-Text durch Auslassungspunkte, wenn er div oder span überschreitet

Code zum Ersetzen von CSS-Text durch Auslassungspunkte, wenn er div oder span überschreitet

不言
Freigeben: 2018-06-11 14:42:35
Original
2322 Leute haben es durchsucht

Im Projekt müssen wir oft den Text anzeigen, wenn er zu lang ist, und den überschüssigen Inhalt durch Auslassungspunkte ersetzen. Wie wird dies basierend auf CSS-Code erreicht? Im Folgenden gibt Ihnen der Herausgeber von Script House eine ausführliche Erklärung, indem er diesen Artikel analysiert. Interessierte Freunde können gemeinsam lernen.

Im Projekt müssen wir häufig den Text anzeigen, wenn er zu lang ist, und ihn ersetzen der überschüssige Inhalt mit Ellipsen:
Die Idee ist:
Legen Sie zuerst die Breite fest und blenden Sie dann den überschüssigen Teil aus.
Wenn Überschuss vorhanden ist, zeigen Sie am Ende eine Ellipse an
Lassen Sie den Text nicht umbrechen
Spezifisches CSS Der Code lautet:

.title{ 
width:200px; 
overflow:hidden; 
text-overflow:ellipsis; 
white-space:nowrap; 
word-break:keep-all; 
}
Nach dem Login kopieren

Es ist nicht erforderlich, HTML-Code zu schreiben, nur eine p- oder span-Klasse = „Titel“.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Zusammenfassung der Wissenspunkte zum CSS-Frontend

Verwendung von 63 Zeilen HTML5-Code zur Implementierung Schlangenspiel

Das obige ist der detaillierte Inhalt vonCode zum Ersetzen von CSS-Text durch Auslassungspunkte, wenn er div oder span überschreitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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
Aktuelle Ausgaben
Span-Farbproblem
Aus 1970-01-01 08:00:00
0
0
0
Span-Tag
Aus 1970-01-01 08:00:00
0
0
0
Ist span auch ein Tag?
Aus 1970-01-01 08:00:00
0
0
0
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage