So zeigen Sie CSS über Ellipsen hinaus an

Beim Webdesign kommt es häufig vor, dass der Textinhalt zu lang ist. Zu diesem Zeitpunkt muss der Textinhalt, der eine bestimmte Länge überschreitet, weggelassen und angezeigt werden, um zu vermeiden, dass das Interface-Layout gestreckt wird und das Benutzererlebnis beeinträchtigt. CSS bietet eine praktische Anzeige über das Ellipsenattribut hinaus, die Entwicklern bei der Implementierung dieser Funktion helfen kann.

In CSS wird die Anzeige über die Auslassungspunkte hinaus durch Textüberlauf erreicht. Wenn ein Text die Größe seines Containers überschreitet, können Sie die Eigenschaft text-overflow so festlegen, dass der überschüssige Text durch Auslassungspunkte (...) angezeigt wird. Normalerweise müssen Sie die folgenden drei Attribute angeben:

1. white-space-Attribut: steuert, wie der Leerraum innerhalb des Elements behandelt wird. Sie können den Wert auf nowrap setzen, was bedeutet, dass der Text ohne Umbruch angezeigt werden soll. weil die Ellipsen normalerweise am Ende der Zeile erscheinen.
2. Overflow-Attribut: Steuert, wie der Elementinhalt angezeigt wird, wenn er über die Elementbox hinausgeht. Sie können den Wert auf „Ausblenden“ oder „Scrollen“ festlegen, da die Anzeige nur dann unterbleiben muss, wenn der Text im Container die Größe des Containers überschreitet .
3. text-overflow-Attribut: Gibt an, wie der Text angezeigt wird, nachdem er den Container überschreitet. Sie können den Wert auf Auslassungspunkte setzen, was bedeutet, dass Auslassungspunkte (...) verwendet werden.

Zum Beispiel:

.container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Dieser CSS-Code definiert eine Containerklasse .container. Wenn der Textinhalt im Container die Größe des Containers überschreitet, wird er durch Auslassungspunkte (...) dargestellt. Da das White-Space-Attribut auf nowrap gesetzt ist, wird der Text gleichzeitig nicht umbrochen.

Es ist zu beachten, dass die Anzeige über die Auslassungspunkte hinaus nur bei bestimmten Elementen wirksam ist, z. B. bei Elementen auf Blockebene und Inline-Elementen wie div, p, span usw. Für Elemente wie Eingabefelder und Schaltflächen müssen Sie bestimmte Attribute festlegen, um ähnliche Effekte zu erzielen.

Um mit verschiedenen Browsern kompatibel zu sein, wird in der tatsächlichen Entwicklung empfohlen, die folgenden zwei Methoden gleichzeitig zu verwenden, um eine Anzeige über die Auslassungspunkte hinaus zu erreichen:

1. Verwenden Sie text-overflow:ellipsis-; orient: Vertical; -webkit-line-clamp:n; implementiert in Kombination mit dem CSS-erweiterten Attribut des WebKit-Kerns -webkit-line-clamp, wobei n die angegebene Anzahl von Zeilen ist. Zum Beispiel:

.container {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

Dieser CSS-Code beschränkt den Textinhalt auf zwei Zeilen und der überschüssige Inhalt wird durch Auslassungspunkte (...) dargestellt. Es ist zu beachten, dass das Attribut -webkit-line-clamp nur für Browser mit WebKit-Kern (wie Chrome, Safari usw.) gültig ist und für andere Browser andere Attribute verwendet werden müssen.

2. Verwenden Sie dazu das Pseudoelement :before oder :after in Kombination mit dem Content-Attribut. Zum Beispiel:

.container {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container:after {
  content: "...";
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

Dieser CSS-Code verwendet das Pseudoelement: after, um ein Element mit einer weißen Hintergrundfarbe hinzuzufügen, und verwendet dann das Inhaltsattribut mit dem Inhalt „…“, um den Auslassungseffekt zu erzielen. Es ist zu beachten, dass das Positionsattribut der Containerklasse auf „relativ“ gesetzt werden muss, um die relative Position des Pseudoelements und des Containers beizubehalten.

Kurz gesagt ist CSS jenseits der Ellipsenanzeige eine klassische Designtechnik, die die Ästhetik und das Benutzererlebnis der Benutzeroberfläche verbessern kann. In der tatsächlichen Entwicklung ist es notwendig, die geeignete Methode entsprechend der spezifischen Situation auszuwählen und Kompatibilitätstests durchzuführen, um sicherzustellen, dass der erzielte Effekt den Erwartungen entspricht.

Das obige ist der detaillierte Inhalt vonSo zeigen Sie CSS über Ellipsen hinaus an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!