Wie man CSS-Text überläuft und ausblendet

Mit dem Aufstieg und der Entwicklung der Website benötigen wir immer mehr Textanzeige und -layout. Dabei ist die Länge des Textinhalts immer schwieriger zu kontrollieren und kann sogar die Grenzen des Containers überschreiten, was zu einem verwirrenden Seitenlayout führt. Um dieses Problem zu lösen, können wir die versteckte Textüberlaufeigenschaft in CSS verwenden, um den Anzeigebereich von Text zu steuern. Dieser Artikel bietet eine detaillierte Einführung und Anwendung der versteckten CSS-Textüberlaufeigenschaften.

1. Ausgeblendetes CSS-Textüberlaufattribut

Das von CSS bereitgestellte CSS-Textüberlaufattribut kann uns dabei helfen, zu steuern, wie mit dem überschüssigen Teil umgegangen wird, wenn der Textinhalt in einem Container den Umfang des Containers überschreitet. . Wir können die text-overflow-Eigenschaft in CSS verwenden, um den Textüberlauf auszublenden. Die Attributwerte von

text-overflow lauten wie folgt:

1. clip: Wenn der Text den Umfang des Containers überschreitet, wird er abgeschnitten und nicht angezeigt.
2. Auslassungspunkte: Fügen Sie am Ende des Textes Auslassungspunkte (…) hinzu.
3. Zeichenfolge: Geben Sie eine Zeichenfolge als Anzeigestil für den Textüberlauf an. Sie können den Auslassungszeichenstil anpassen.

2. Verwenden Sie text-overflow, um den Textüberlauf auszublenden. Das Folgende ist ein Beispiel für die Verwendung des text-overflow-Attributs, um den Textüberlauf auszublenden.

HTML-Code:

<div class="container">
  <p>
    我们的使命是将人民群众的利益放在第一位，通过改革开放不断推进中国特色社会主义事业。
  </p>
</div>

CSS-Code:

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

Parsing:

Die Breite des Containers beträgt 300 Pixel und die Höhe beträgt 50 Pixel. Wenn der Textinhalt die Grenzen des Containers überschreitet, wird er ausgeblendet.

1. overflow:hidden-Attribut gibt an, dass der Überlaufteil innerhalb des Containers abgeschnitten und nicht auf der Seite angezeigt wird. Dieses Attribut stellt sicher, dass keine Bildlaufleisten im Text erscheinen. Das Attribut „white-space:nowrap“ gibt an, dass Text nicht umgebrochen werden darf. Dies ist sehr wichtig. Wenn der Text einen Zeilenumbruch zulässt, gibt es keine Möglichkeit, den Anzeigebereich des Texts zu steuern.
2. text-overflow:ellipsis-Attribut gibt an, dass am Ende des Texts ein Auslassungszeichen (…) angezeigt wird, wenn dieser den Umfang des Containers überschreitet.
3. Laufendes Ergebnis:
4. Wie in der Abbildung gezeigt, überschreitet die Länge des Textes den Umfang des Containers und am Ende werden Auslassungspunkte angezeigt.

3. Verwenden Sie Textüberlauf, um den Auslassungszeichenstil anzupassen. Bei der tatsächlichen Verwendung müssen wir möglicherweise den Auslassungszeichenstil anpassen. Hier ist ein Beispiel.

HTML-Code:

<div class="container">
  <p class="text">
  我们的使命是将人民群众的利益放在第一位，通过改革开放不断推进中国特色社会主义事业。
  </p>
</div>

CSS-Code:

.container {
  width: 300px;
  height: 50px;
  overflow: hidden;
}

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

.text::after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 2px;
  background-color: #fff;
  color: #999;
}

Parsing:

Im Stil der Textklasse wird die Kombination aus dem Attribut „white-space:nowrap“ und dem Attribut „text-overflow:ellipsis“ verwendet, um anzugeben, wie Der Text wird angezeigt. overflow:hidden wird verwendet, um sicherzustellen, dass der überlaufende Teil des Textes abgeschnitten wird und nicht auf der Seite angezeigt wird.

Das Pseudoelement ::after der Textklasse style fügt am Ende des Textes ein Suffix „...“ hinzu und gibt die Position und den Stil dieses Suffixes an.

Laufendes Ergebnis:
1. Wie im Bild gezeigt, wird der benutzerdefinierte Ellipsenstil am Ende des Textes angezeigt.
2. Zusammenfassung:

Durch die Einführung und Beispieloperationen dieses Artikels können wir das Textüberlaufattribut verwenden, um das Ausblenden von Textüberläufen zu implementieren und sicherzustellen, dass der Anzeigebereich des Texts die Grenzen des Containers nicht überschreitet Gleichzeitig können wir auch den Auslassungsstil anpassen, um unsere Seite schöner und standardisierter zu gestalten. Solange wir diese Eigenschaft beherrschen, können wir unseren Schriftsatz verfeinern und professioneller gestalten.

Das obige ist der detaillierte Inhalt vonWie man CSS-Text überläuft und ausblendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!