So erzielen Sie den Ellipseneffekt, der über das Verstecken in CSS hinausgeht

Beim Webseitenlayout müssen wir häufig die Breite oder Höhe bestimmter Elemente begrenzen. Wenn die Breite oder Höhe den Grenzwert überschreitet, ist die Art und Weise, wie der Textinhalt angezeigt wird, sehr wichtig. Normalerweise können wir das Attribut overflow:hidden in CSS verwenden, um die Anzeige von Elementinhalten einzuschränken. Wenn Inhalte jedoch ausgeblendet werden, können einige wichtige Informationen weggelassen werden, was für Benutzer unfreundlich ist. Daher müssen wir die CSS-Option „Ellipsen“ verwenden, um Benutzer darüber zu informieren, dass Textinhalte weggelassen wurden.

Wenn der Textinhalt den Grenzwert überschreitet, besteht die Standardverarbeitungsmethode des Browsers darin, den überschüssigen Text abzuschneiden und auszublenden. Manchmal müssen wir jedoch Auslassungspunkte anzeigen, um dem Benutzer mitzuteilen, dass einige Inhalte ausgelassen wurden. Zu diesem Zeitpunkt können wir dies durch die Eigenschaft text-overflow in CSS erreichen.

Mit der CSS-Eigenschaft text-overflow wird angegeben, wie Ellipsen angezeigt werden, wenn Text über das enthaltende Element hinausläuft. Das text-overflow-Attribut hat drei Werte: Clip, Ellipse und String.

1. Der Clip-Wert bedeutet, dass bei einem Textüberlauf der Inhalt außerhalb des Textes ausgeblendet und die Auslassungspunkte nicht angezeigt werden.
2. Der Auslassungspunktwert bedeutet, dass beim Überlaufen des Textes der Inhalt außerhalb des Textes ausgeblendet wird und am Ende des Textes Auslassungspunkte angezeigt werden.
3. Der Zeichenfolgenwert bedeutet, dass bei einem Textüberlauf der Inhalt außerhalb des Textes ausgeblendet und die angegebene Zeichenfolge am Ende des Textes angezeigt wird. Sie können den Wert beispielsweise auf „…“ setzen, dann werden am Ende des Textes drei Punkte angezeigt, die darauf hinweisen, dass einige Inhalte ausgelassen wurden.

Das text-overflow-Attribut muss zusammen mit den beiden Attributen overflow:hidden und white-space:nowrap verwendet werden. Unter diesen gibt White-Space: Nowrap an, dass der Text nicht umgebrochen werden kann und nur in einer Zeile angezeigt werden kann. overflow:hidden gibt an, dass der überschüssige Teil ausgeblendet wird, wenn der Text überläuft.

Das Folgende ist ein Beispiel. Wir setzen die Breite eines div-Elements auf 100 Pixel, die Höhe auf 50 Pixel und den Textinhalt auf superlangen Text. Wenn der Text überläuft, verwenden wir die Eigenschaft text-overflow:ellipsis in CSS, um die Auslassungspunkte anzuzeigen:

<div class="text-overflow">这是一个超长的文本，它将会在这个div中被限制宽度和高度。</div>

.text-overflow {
  width: 100px;
  height: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Im obigen Code begrenzen wir die Breite und Höhe des Elements und der Teil hinter dem Text wird ausgeblendet. Gleichzeitig stellen wir ein, dass der Text nicht umgebrochen wird und in einer Zeile angezeigt werden kann. Schließlich verwenden wir das Attribut text-overflow:ellipsis, um die Ellipsen anzuzeigen.

Zusammenfassung

Die CSS-Attribute „Beyond-Hide“ und „Ellipse“ sind häufig verwendete Techniken im Webseitenlayout. Sie können die Breite oder Höhe von Elementen effektiv begrenzen und Auslassungspunkte anzeigen, wenn der Text überläuft, sodass Benutzer bestimmte Informationen klar erkennen können wurde weggelassen. Das Attribut „text-overflow“ muss zusammen mit den Attributen „overflow:hidden“ und „white-space:nowrap“ verwendet werden, um den Auslassungsanzeigeeffekt korrekt zu implementieren.

Ich hoffe, dieser Artikel ist hilfreich für Sie, vielen Dank fürs Lesen!

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Ellipseneffekt, der über das Verstecken in CSS hinausgeht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!