CSS außerhalb der Anzeige...

Schritte über die Anzeige von Ellipsen in CSS hinaus: 1. Verstecken Sie den Teil des Textinhalts, der über den Container hinausgeht. 2. Stellen Sie sicher, dass der Text korrekt umbrochen werden kann, damit er in die Breite oder Höhe des Containers passt Durch die Breite oder Höhe des Containers wird der überschüssige Inhalt ausgeblendet, und Sie können am Ende des ausgeblendeten Teils Auslassungen hinzufügen. 4. Verwenden Sie die Eigenschaften width und height von CSS, um die Breite oder Höhe des Containers festzulegen.

Wenn in CSS der Textinhalt die Breite oder Höhe des Containers überschreitet, können Sie Auslassungspunkte verwenden, um anzuzeigen, dass der Textinhalt ausgeblendet ist. Dieser Effekt wird häufig bei langen Texten oder Titeln in Containern wie Tabellen, Listen und Karten verwendet, um Platz zu sparen und eine bessere Benutzererfahrung zu bieten. Im Folgenden wird detailliert beschrieben, wie Sie mithilfe von CSS Effekte erzielen, die über die Anzeige von Ellipsen hinausgehen.

1. Textüberlauf ausblenden

Um den Effekt zu erzielen, der über die Anzeige von Ellipsen hinausgeht, müssen Sie zunächst den Teil des Textinhalts ausblenden, der über den Container hinausgeht. Mit der CSS-Eigenschaft overflow können Sie das Überlaufverhalten des Containers festlegen. Häufig verwendete Attributwerte sind:

overflow: versteckt;: Überschüssigen Inhalt im Container ausblenden;

overflow: scroll;: Bildlaufleisten anzeigen, damit Benutzer den überschüssigen Inhalt anzeigen können;

overflow: auto;: Anzeigen Scrollen nach Bedarf Streifen.

Wenn Sie beispielsweise Textinhalte ausblenden möchten, die über die Breite des Containers hinausgehen, können Sie das Attribut „overflow-x“ des Containers auf „hidden“ setzen kann das overflow-y-Attribut des Containers auf „hidden“ setzen.

2. Textumbruch

Nachdem Sie den Textinhalt ausgeblendet haben, müssen Sie sicherstellen, dass der Text korrekt umbrochen werden kann, um der Breite oder Höhe des Containers zu entsprechen. Sie können die CSS-Eigenschaft „white-space“ verwenden, um zu steuern, wie Text umbrochen wird. Häufig verwendete Attributwerte sind:

white-space: nowrap;: Textumbruch verbieten, der gesamte Textinhalt wird in einer Zeile angezeigt

white-space: normal;: Text umbrechen lassen, automatisch umbrechen;

white- space: pre;: Leerzeichen und Zeilenumbrüche im Text beibehalten, aber den Text umbrechen lassen.

Normalerweise müssen wir den Textinhalt so umbrechen, dass er zur Breite des Containers passt, damit wir die Leerraumeigenschaft des Containers auf „Normal“ setzen können.

3. Auslassungspunkte hinzufügen

Wenn der Textinhalt die Breite oder Höhe des Containers überschreitet, wird der überschüssige Inhalt ausgeblendet. Um den Benutzer daran zu erinnern, können Sie am Ende des ausgeblendeten Abschnitts ein Auslassungszeichen hinzufügen. Sie können die CSS-Eigenschaft text-overflow verwenden, um diesen Effekt zu erzielen. Häufig verwendete Attributwerte sind:

text-overflow: clip;: Überschüssigen Inhalt ausblenden und Auslassungspunkte nicht anzeigen;

text-overflow: ellipsis;: Überschüssigen Inhalt ausblenden und Auslassungspunkte anzeigen.

Um den Auslassungseffekt zu erzielen, muss die Textüberlaufeigenschaft des Containers auf Auslassungspunkte gesetzt werden.

4. Legen Sie die Breite oder Höhe fest.

Um schließlich den Teil des Texts außerhalb des Containers auszublenden und die Auslassungspunkte anzuzeigen, müssen Sie die Breite oder Höhe des Containers festlegen. Sie können die CSS-Eigenschaften width und height verwenden, um die Breite oder Höhe eines Containers festzulegen.

Zusammenfassend sind die Schritte zum Erzielen eines Effekts, der über die Anzeige von Ellipsen hinausgeht, wie folgt:

Setzen Sie die Eigenschaft „overflow-x“ oder „overflow-y“ des Containers auf „hidden“, um den überschüssigen Teil des Textinhalts auszublenden

Ändern Sie die weiße Eigenschaft des Containers, um das Umbrechen von Text zu ermöglichen.

Setzen Sie die Textüberlaufeigenschaft des Containers auf Ellipse, um Ellipsen anzuzeigen kann ausgeblendet werden.

Das Folgende ist ein Beispielcode, der zeigt, wie Sie mit CSS den Effekt erzielen, dass die Anzeige von Ellipsen überschritten wird:

<style>
.container {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
<div class="container">
  This is a long text that will be truncated with an ellipsis when it exceeds the container width.
</div>

Im Folgenden wird beschrieben, wie Sie mit CSS den Effekt erzielen, dass die Anzeige von Ellipsen überschritten wird. Dieser Effekt kann leicht erreicht werden, indem das Überlaufverhalten des Containers, der Textumbruch, der Auslassungsstil und die Breite oder Höhe des Containers festgelegt werden.

Das obige ist der detaillierte Inhalt vonCSS außerhalb der Anzeige.... Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!