So zeigen Sie überschüssige Teile mehrerer Zeilen als Ellipsen in CSS an

Wenn in CSS mehrere Textzeilen erscheinen, besteht oft das Problem, dass der überschüssige Teil nicht richtig angezeigt werden kann. Zu diesem Zeitpunkt können wir Ellipsen verwenden, um dieses Problem zu lösen.

Die spezifische Operationsmethode ist wie folgt:

1. Zuerst müssen Sie einen Container mit begrenzter Breite für den Text festlegen, zum Beispiel:

<div class="text-container">
  这是一段需要进行多行省略号处理的文本内容
</div>

2. Dann legen Sie den Stil des Textcontainers in CSS fest, einschließlich der Breite , Schriftgröße, Zeilenhöhe und andere Attribute:

.text-container {
  width: 300px;
  font-size: 16px;
  line-height: 1.5;
}

3. Als nächstes können wir den Auslassungseffekt durch die Eigenschaft text-overflow in CSS erzielen. Diese Eigenschaft hat drei Werte: Clip, Ellipse und String. Unter diesen bedeutet „clip“, dass keine Auslassungspunkte angezeigt werden, und „string“ bedeutet, dass die angegebene Zeichenfolge als Auslassungspunkte angezeigt wird. Wenn mehrere Textzeilen weggelassen werden, werden normalerweise Auslassungspunkte verwendet, um den Wert zu ermitteln. Gleichzeitig müssen wir den Leerraum auf „Normal“ oder „Normal-Umbruch“ setzen, damit der Text automatisch umgebrochen wird, wenn die Breite des Containers überschritten wird.

.text-container {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;  /* 控制行数 */
  -webkit-box-orient: vertical;
}

4. Im obigen Code verwenden wir auch die Eigenschaften -webkit-line-clamp und -webkit-box-orient, um die Anzahl und Richtung der Textzeilen zu steuern. Unter anderem wird das Attribut -webkit-line-clamp verwendet, um die Anzahl der angezeigten Textzeilen zu steuern. In diesem Beispiel habe ich es so eingestellt, dass bis zu 3 Zeilen angezeigt werden. Das Attribut -webkit-box-orient wird verwendet, um die Anordnung der untergeordneten Elemente einer flexiblen Box zu definieren. Hier stelle ich es auf vertikale Anordnung ein.

Damit ist der Effekt von mehrzeiligen CSS-Ellipsen abgeschlossen. Im Allgemeinen ist es wichtig, die Breite des Textcontainers sowie die entsprechende Anzahl an Zeilen und den Ellipsenstil festzulegen. Verwenden Sie gleichzeitig das Attribut text-overflow, um den Auslassungsstil des überschüssigen Textteils zu steuern und so bessere Ergebnisse zu erzielen.

Das obige ist der detaillierte Inhalt vonSo zeigen Sie überschüssige Teile mehrerer Zeilen als Ellipsen in CSS an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!