Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie zeige ich Ellipsen in einer Spanne mit verstecktem Überlauf an?

Patricia Arquette
Freigeben: 2024-10-30 04:27:02
Original
239 Leute haben es durchsucht

How to Display Ellipses in a Span with Hidden Overflow?

So verketten Sie Ellipsen in Inhalten mit ausgeblendetem Überlauf

In dieser Frage äußert ein Entwickler die Notwendigkeit, Ellipsen anzuzeigen ("... ") in einem Span-Element mit verstecktem Überlauf. Sie stellen ein CSS-Code-Snippet bereit, das den versteckten Überlauf, aber nicht die Anzeige von Ellipsen zeigt.

Die bereitgestellte Lösung schlägt die Verwendung der Eigenschaft text-overflow: ellipsis vor, die das Abschneiden von Inhalten ermöglicht Anzeige von Ellipsen, wenn der Inhalt des Elements seine Breite überschreitet. Hier ist der korrigierte CSS-Code:

<code class="css">span {
  display: inline-block;
  width: 180px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}</code>
Nach dem Login kopieren

Die zusätzliche Eigenschaft white-space: nowrap stellt sicher, dass der Inhalt nicht in mehrere Zeilen umgebrochen wird, was dazu führen kann, dass Ellipsen nicht richtig angezeigt werden.

Das obige ist der detaillierte Inhalt vonWie zeige ich Ellipsen in einer Spanne mit verstecktem Überlauf an?. 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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage