Ein tiefer Einblick in einige CSS3-Tipps über Ellipsen hinaus

Die Text-Overflow-Eigenschaft in CSS3 ist eine sehr nützliche Funktion, mit der wir steuern können, wie der Textinhalt eines Elements angezeigt wird, wenn es die Größe seines Containers überschreitet. Standardmäßig wird Text außerhalb des Containers durch Auslassungspunkte (...) ersetzt. In diesem Artikel gehen wir auf einige der Tricks und Einsatzmöglichkeiten von CSS3 ein, die über die Auslassungspunkte hinausgehen.

Grundlegende Verwendung

Werfen wir zunächst einen Blick auf die grundlegende Verwendung des Textüberlauf-Attributs. Es gibt drei optionale Werte:

• clip: Text außerhalb des Containers ausschneiden, ohne Ellipsen anzuzeigen.
• Auslassungspunkte: Am Ende des Containers werden Auslassungspunkte angezeigt. (Standard)
• string: Zeigt die angegebene Zeichenfolge am Ende des Containers an.

Hier ist ein einfaches Beispiel, das zeigt, wie Auslassungspunkte am Ende eines Containers angezeigt werden:

div {
  width: 200px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

Dadurch wird eine Textzeile in einem 200 Pixel breiten Div angezeigt. Wenn der Text die Containergröße überschreitet, wird er abgeschnitten und durch Ellipsen ersetzt.

Verwenden Sie vor oder nach Pseudoelementen, um Auslassungspunkte hinzuzufügen.

Verwenden Sie das Stilattribut text-overflow, um zu erkennen, dass der Text die Auslassungspunkte überschreitet. Im Allgemeinen werden die Auslassungspunkte am Ende des Containers hinzugefügt. Diese Lösung ist die einfachste, aber auch gebräuchlichste Vorgehensweise. Wenn wir mehr Highlights setzen wollen, müssen wir über innovativere Ansätze nachdenken.

Durch die Verwendung des CSS-Pseudoelements :before oder :after können leicht Ellipsen hinzugefügt werden. Mit dieser Methode können normalerweise Spezialeffekte erzielt werden (z. B. linksbündiger Ellipsentext). Durch das Hinzufügen von Stilen können wir steuern, wie das Pseudoelement angezeigt wird, und die Anzeige des Originaltexts überschreiben.

Der folgende Code demonstriert das Hinzufügen eines Auslassungspunktes rechts von einem Container:

div {
  position: relative;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
}

div:before {
  content: "...";
  position: absolute;
  right: 0;
  top: 0;
  background-color: #fff;
  padding: 0 2px;
}

Dadurch wird ein Auslassungspunkt rechts von einem Container hinzugefügt. Wir haben das Pseudoelement mit absoluter Positionierung in der oberen rechten Ecke des Containers platziert und einen weißen Hintergrund und etwas Polsterung hinzugefügt, um sicherzustellen, dass die Ellipsen vollständig sichtbar sind.

Verwenden Sie die CSS3-Funktion calc(), um den verfügbaren Platz für Ellipsen zu steuern.

Die Funktion calc() in CSS3 ermöglicht die Verwendung mathematischer Ausdrücke in CSS, was für die dynamische Berechnung von Größe oder Abstand sehr nützlich ist. Zusätzlich zu den Auslassungspunkten können wir die Funktion calc() verwenden, um den verfügbaren Platz zu steuern und sicherzustellen, dass der Text und die Auslassungspunkte vollständig angezeigt werden können.

Der folgende Code zeigt, wie Text und Ellipsen in einem 300 Pixel breiten Container angezeigt werden:

div {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div span {
  position: relative;
  display: inline-block;
  max-width: calc(100% - 20px); /* 容器宽度-省略号的宽度 */
  vertical-align: top;
}

div span:after {
  content: '...';
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 100%;
  text-align: center;
  background-color: #fff; /* 背景色和容器一致 */
}

Im obigen Code haben wir zwei Schlüsselstile verwendet: die Funktion calc() und das Element span. Das Span-Element ist auf „inline-block“ eingestellt, wodurch Text eine eigene Zeile einnehmen kann, ohne dass die Darstellung anderer Elemente beeinträchtigt wird. Verwenden Sie das Attribut max-width, um die maximale Breite des Span-Elements auf die Breite des Containers minus der Breite der Auslassungspunkte festzulegen. Dadurch wird sichergestellt, dass der Text den verfügbaren Platz des Containers nicht überschreitet.

Verwendung von CSS3 Flexbox

Das Flexbox-Layout in CSS3 ist sehr nützlich, es ermöglicht uns, flexible und reaktionsfähige Layouts mit CSS zu erstellen. Wenn wir mehrere Textzeilen in einem Container anzeigen müssen und der letzten Zeile eine Ellipse hinzufügen möchten, ist die Verwendung des Flexbox-Layouts eine gute Wahl.

Der folgende Code zeigt, wie Sie mit dem Flexbox-Layout mehrere Textzeilen in einem 300 Pixel breiten Container anzeigen und in der letzten Zeile Auslassungspunkte hinzufügen:

div {
  display: flex;
  flex-direction: column;
  height: 80px;
  width: 300px;
  overflow: hidden;
}

div p {
  flex: 1;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

div p:last-child {
  overflow: visible; /* 显示容器溢出的文本 */
  text-overflow: '';
  white-space: normal;
}

Im obigen Code verwenden wir drei wichtige Stilattribute: display : Flex, Flex-Richtung: Spalte und Flex: 1. Der Flex-Container ist auf die Spalte „flex-direction:“ eingestellt, sodass die untergeordneten Elemente vertikal angeordnet sind. Jedes Absatzelement ist auf „flex:1“ eingestellt, um sicherzustellen, dass es die volle Höhe des Containers einnimmt.

Das letzte Absatzelement ist auf „overflow: sichtbar“ eingestellt, sodass es den Container überläuft und den gesamten Text anzeigt. Außerdem legen wir die Eigenschaft text-overflow auf eine leere Zeichenfolge fest, damit der Text nicht auf Ellipsen beschränkt wird. Auf diese Weise läuft der Text im letzten Absatzelement natürlich in die letzte Zeile des Containers über und das Flexbox-Layout fügt automatisch die Auslassungspunkte in die letzte Zeile ein.

Zusammenfassung

In diesem Artikel haben wir einige Tipps und Verwendungsmöglichkeiten von CSS3 über Ellipsen hinaus untersucht. Zusätzlich zur grundlegenden Textüberlaufeigenschaft zeigen wir auch, wie man Pseudoelemente und die CSS3-Funktion calc() verwendet, um kreativere Effekte zu erzielen. Wir haben auch erläutert, wie Sie das CSS3-Flexbox-Layout verwenden, um mehrere Textzeilen anzuzeigen und Ellipsen hinzuzufügen. Unabhängig davon, welche Technologie Sie verwenden, stellen Sie sicher, dass Sie bei der Anzeige von Text bewährte Methoden anwenden. Dadurch wird sichergestellt, dass der Text in verschiedenen Kontexten gut wiedergegeben wird.

Das obige ist der detaillierte Inhalt vonEin tiefer Einblick in einige CSS3-Tipps über Ellipsen hinaus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!