Eine Ellipsis ist ein Interpunktionszeichen, das aus drei Punkten besteht, die verwendet werden, um das Fehlen eines Wortes, eines Absatzes, eines Zitats oder mehr anzuzeigen. In der Fiktion haben wir die Ellipsis häufig verwendet, um Zögern anzunehmen, oder etwas, um Neugier aufzubauen. Insbesondere werden diese Ellipsen verwendet, wenn der Satz nicht abgeschlossen ist. Um Ellipsis auf Ihrer Webseite anzuzeigen.

In diesem Artikel wird Sie beanstandet, warum die Text-Overflow-Eigenschaft mit Value-Ellipsis nicht funktioniert.

Warum funktioniert Text-Overflow-Ellipsis in CSS nicht??

Wir werden das angegebene Thema mit einer praktischen Demonstration diskutieren.

Fügen Sie zuerst in HTML zuerst ein Div -Element mit dem Klassennamen hinzu “hauptsächlich”. Dann füge hinzu

Element zum Hinzufügen einer Überschrift zur Webseite, einem Div mit dem Klassennamen “Unterabschnitt"Das enthält zwei Div -Klassen"linke Sektion" Und "Rechtsabschnitt”. Diese beiden DIV -Elemente enthalten

Elemente zum Übergang und dann werden ihnen einige Inhalte hinzugefügt. Endlich a

Tag wird hinzugefügt, um Inhalte hinzuzufügen.

Html

Willkommen in der LinuxHint School

Qualität der Bildung

Wir bieten der Welt eine qualitativ hochwertige Bildung!

Artikel schreiben

Ein technischer Autor schreibt Artikel über Informatik -Themen.

Sie können alle Informatik -Themen auf der LinuxHint -Website lernen. Unsere erste Priorität ist unser Publikum.

Die Struktur der Webseite ist abgeschlossen und kann im folgenden Bild angezeigt werden:

Der nächste Abschnitt zeigt, wie Sie Stileigenschaften auf die HTML -Elemente anwenden können. Zu diesem Zweck fügen Sie die Eigenschaft hinzu "Text-Überfluss"Mit dem Wert"Ellipsen" zum

Element, "linke Sektion", Und "Rechtsabschnitt”. Mal sehen, was passieren wird, wenn diese Eigenschaft auf die Elemente angewendet wird.

Style Main Div

.hauptsächlich
Breite: 500px;
Rand: 2px Auto;
Polsterung: 8px;
Border-Radius: 10px;
Hintergrundfarbe: #432c7a;
Farbe: Ghostwhite;

Der ".hauptsächlich”Bezieht sich auf das DIV -Element mit dem Hauptnamen der Klassennamen. Die Beschreibung der angewandten CSS -Eigenschaften ist unten angegeben:

• “Breite"Eigenschaft wird verwendet, um die Breite des Elements auf" einzustellen "500px”.
• “Rand"Eigenschaft ist auf" eingestellt "2px Auto”, Der einen Raum von 2px am oberen Boden und gleichem Raum zu den links-rechtlichen Seiten der Div festlegen wird.
• “Polsterung”Eigenschaft mit dem Wert“8px”Fügt einen Raum von 8px um den Inhalt des Div -Haupts.
• “GrenzradiusDas Eigentum lässt die Ecken des Div -Elements abgerundet.
• “HintergrundfarbeDie Eigenschaft setzt die angegebene Farbe auf den Hintergrund des Elements.
• “FarbeDie Eigenschaft setzt die Farbe auf die Schriftart des Elements.

Stil P -Element

.hauptsächlich,
.linke Sektion,
.rechter Abschnitt P
Schriftgröße: 18px;

Der

Element des Div-Haupts, der linke Sektion und des rechten Abschnitts ist mit dem von "geliefert"Schriftgröße" als "18px”.

Stil H1 -Element der Hauptdiv

.Haupth1
Text-Overflow: Ellipsis;

Verwenden Sie die “Text-Überfluss”Eigenschaft mit dem Wert“Ellipse" zum

Element des Div -Haupts.

Stil Unterabschnitt Div

.Unterabschnitt
Anzeige: Flex;

Das DIV -Element mit dem Klassennamen “Unterabschnitt"Wird mit der Anzeigeeigenschaft angewendet"biegenUm ein flexibles, reaktionsschnelles Layout zu erstellen.

Stil linksabschnitt div

.linke Sektion
Hintergrundfarbe: #FA9393;
Polsterung: 3px;
Rand: 1PX;
Border-Radius: 10px;

Der ".linke Sektion”Bezieht sich auf die linke Klasse des Divelelements. Die Erklärung der für dieses Div -Element angewendeten Eigenschaften ist unten angegeben:

• “HintergrundfarbeEigenschaft wendet Farbe auf den Hintergrund des Elements an.
• “PolsterungDas Eigentum erzeugt einen Raum um den Inhalt der linken Div.
• “RandDas Eigentum erzeugt einen Raum um das DIV-Element des linken Abschnitts.
• “GrenzradiusDas Eigentum macht die spitzen Kanten rund.

Stil rechtsabschnitt div

.rechter Abschnitt
Hintergrundfarbe: #ff8fb1;
Polsterung: 3px;
Rand: 1PX;
Text-Overflow: Ellipsis;
Border-Radius: 10px;

Die folgenden Eigenschaften werden mit Klassennamen auf das DIV -Element angewendet “Rechtsabschnitt”:

• “HintergrundfarbeEigenschaft wendet Farbe auf den Hintergrund des Elements an.
• “Polsterung”Eigenschaft fügt Platz um den Inhalt der linken Diven hinzu.
• “RandEigenschaft fügt Platz um das DIV-Element des linken Abschnitts hinzu.
• “Text-Überfluss”Mit Value Ellipsis wird dem Benutzer verwendet, dass der Überlauf dieses Textes versteckt ist.
• “GrenzradiusDie Eigenschaft wird verwendet, um die Kanten des Elements in rund umzuwandeln.

Durch die Bereitstellung des obigen Codes wird das Ergebnis wie folgt angezeigt:

Es ist im obigen Bild zu sehen, dass der Text der Überschrift

, Der linke Abschnitt und der rechte Abschnitt werden im Ellipsis-Text nicht angezeigt. Jetzt, im nächsten Abschnitt, werden wir die Text-Overflow-Eigenschaft mit anderen Eigenschaften anwenden, die dazu beitragen, den Text mit der Ellipsis (…) zu erstellen.

So verwenden Sie Text-Overflow-Ellipsis in CSS?

Die Eigenschaft Text-Overflow funktioniert in Kombination mit den anderen Eigenschaften weißer Raum mit Wert Nowrap, Überlauf mit verstecktem Wert:

weißer Raum: Nowrap;
Überlauf versteckt;
Text-Overflow: Ellipsis;

Die Beschreibung der Eigenschaften wird unten erwähnt:

• “weißer Raum”Eigenschaft mit dem Wert“NowrapWird verwendet, um den Text in einer geraden Linie anzupassen.
• “Überlauf”Eigenschaft mit dem Wert“versteckt”Wird verwendet, um den Überlauftext zu verbergen.
• “Text-Überfluss”Eigenschaft mit dem Wert“Ellipse”Wird verwendet, um den Text in eine Ellipsis zu verwandeln.

Ausgang

Das ist es! Wir haben erfolgreich gelernt, warum CSS Text-Overflow-Ellipsis nicht funktioniert und wie man es behebt.

Abschluss

In CSS kann der Text-Overflow-Eigenschaft die Wert-Ellipsis zugewiesen werden. Aber es wird nicht alleine funktionieren. Die Ellipsis arbeitet auf dem Element, in dem Breite eingestellt ist. “Pixel"Die Eigenschaft aus weißer Raum muss als" angegeben werden "Nowrap", Und der Wert der Überlaufeigenschaft als"versteckt”. Dieser Artikel hat gezeigt, wie die CSS-Text-Overflow-Eigenschaft mit dem Wert Ellipsis funktioniert und ein relevantes Beispiel bereitgestellt hat.