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

Auslassungspunkte in einem Bereich mit verstecktem Überlauf anzeigen

In CSS bestimmt die Überlaufeigenschaft, was passiert, wenn der Inhalt eines Elements seine Grenzen überschreitet. Im gegebenen Szenario verbirgt das CSS für ein Span-Element jeglichen überlaufenden Inhalt. Dies führt dazu, dass der Inhalt abgeschnitten wird, wie im Codeausschnitt zu sehen ist.

Um dieses Problem zu beheben, können Sie die Eigenschaft text-overflow verwenden, die steuert, wie sich überlaufender Text verhalten soll. Indem Sie text-overflow auf Auslassungspunkte setzen, können Sie festlegen, dass überlaufender Text durch Auslassungspunkte (...) ersetzt werden soll. Dadurch können Sie einen Teil des Textes innerhalb der Spanne anzeigen und gleichzeitig darauf hinweisen, dass noch mehr vorhanden ist.

So können Sie Ihr CSS ändern, um das gewünschte Ergebnis zu erzielen:

<code class="css">span {
  display: inline-block;
  width: 180px;
  overflow: hidden !important;
  text-overflow: ellipsis;
}</code>

Dies Das aktualisierte CSS zeigt den Text innerhalb des Span-Elements mit einer Breite von bis zu 180 Pixeln an. Der verbleibende Text wird durch Auslassungspunkte ersetzt.

Das obige ist der detaillierte Inhalt vonWie zeige ich Ellipsen in einer Spanne mit verstecktem Überlauf in CSS an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!