Une ellipsis est un point de ponctuation composé de trois points qui sont utilisés pour indiquer l'absence d'un mot, d'un paragraphe, d'une citation ou plus. Souvent dans la fiction, nous avons utilisé les ellipses pour indiquer des hésitations ou quelque chose pour construire une curiosité. Plus précisément, ces ellipses sont utilisées lorsque la phrase n'est pas terminée. Ainsi, pour afficher les ellipsis sur votre page Web, la propriété CSS est la superficie de texte avec des ellipses de valeur peut être utilisée.

Cet article vous guidera pour expliquer pourquoi la propriété de superficie de texte avec des ellipsis de valeur ne fonctionne pas.

Pourquoi les ellipses de superfile de texte ne fonctionnent-elles pas dans CSS?

Nous discuterons du sujet déclaré en utilisant une démonstration pratique.

Pour ce faire, dans HTML, d'abord, ajoutez un élément div avec le nom de classe "principal". Puis ajouter

élément pour ajouter une rubrique à la page Web, une div avec le nom de classe "sous-section«Qui contient deux classes div,«section gauche" et "section de droite". Ces deux éléments div contiennent

Éléments pour le cap, puis un contenu leur est ajouté. Enfin, un

La balise est ajoutée pour ajouter du contenu.

Html

Bienvenue à l'école Linuxhint

Éducation de qualité

Nous fournissons une éducation de qualité au monde!

Écriture d'articles

Un auteur technique écrit des articles sur des sujets informatiques.

Vous pouvez apprendre tous les sujets informatiques du site Web de Linuxhint. Notre première priorité est notre public.

La structure de la page Web est terminée et peut être vue dans l'image ci-dessous:

La section suivante montrera comment appliquer les propriétés de style aux éléments HTML. À cette fin, ajoutez la propriété "contre-flux"Avec la valeur"ellipses" au

élément, "section gauche", et "section de droite". Voyons ce qui se passera lorsque cette propriété sera appliquée aux éléments.

Style Div principal

.principal
Largeur: 500px;
marge: 2px auto;
rembourrage: 8px;
Border-Radius: 10px;
Color d'arrière-plan: # 432C7A;
Couleur: Ghostwhite;

Le ".principal”Se réfère à l'élément div ayant le nom de classe principal. La description des propriétés CSS appliquées est donnée ci-dessous:

• "largeur«La propriété est utilisée pour définir la largeur de l'élément sur«500px".
• "marge«La propriété est définie sur«Auto 2px”Qui spécifiera un espace de 2px au fond supérieur et un espace égal aux côtés gauche-droite du div.
• "rembourrage«Propriété avec la valeur»8px»Ajoute un espace de 8px autour du contenu du div Main.
• "rayon frontalier»La propriété rend les coins de l'élément div arrondi.
• "Couleur de l'arrière plan»La propriété définit la couleur spécifiée sur l'arrière-plan de l'élément.
• "couleur»La propriété définit la couleur de la police de l'élément.

Élément de style P

.principal,
.section gauche,
.Section de droite P
taille de police: 18px;

Le

L'élément de la div principale, de la section gauche et de la section droite est fourni avec le «taille de police" comme "18px".

Style H1 élément de la div principale

.Main H1
Text-overflow: ellipsis;

Utilisez le «contre-flux«Propriété avec la valeur»ellipse" au

élément du div main.

Div sous-section de style

.sous-section
Affichage: flex;

L'élément div avec le nom de classe «sous-section"Est appliqué avec la propriété d'affichage"fléchir«Pour faire une disposition flexible et réactive.

Style Div de la section gauche

.section gauche
Color d'arrière-plan: # FA9393;
rembourrage: 3px;
marge: 1px;
Border-Radius: 10px;

Le ".section gauche”Fait référence à la section gauche de la classe de l'élément div. L'explication des propriétés appliquées à cet élément div est donnée ci-dessous:

• "Couleur de l'arrière plan»La propriété applique de la couleur à l'arrière-plan de l'élément.
• "rembourrage»La propriété produit un espace autour du contenu de la div de section gauche.
• "marge»La propriété produit un espace autour de l'élément div de la section gauche.
• "rayon frontalier”La propriété rend les bords pointus autour.

Style Div de droite

.Section de droite
Color d'arrière-plan: # ff8fb1;
rembourrage: 3px;
marge: 1px;
Text-overflow: ellipsis;
Border-Radius: 10px;

Les propriétés suivantes sont appliquées à l'élément div avec le nom de la classe «section de droite»:

• "Couleur de l'arrière plan»La propriété applique de la couleur à l'arrière-plan de l'élément.
• "rembourrage»La propriété ajoute de l'espace autour du contenu de la div de section gauche.
• "marge»La propriété ajoute de l'espace autour de l'élément div de la section gauche.
• "contre-flux"Avec Value Ellipsis est utilisé pour signaler à l'utilisateur que le débordement de ce texte est caché.
• "rayon frontalier»La propriété est utilisée pour convertir les bords de l'élément en ronde.

En fournissant le code ci-dessus, le résultat s'affiche comme suit:

On peut voir dans l'image ci-dessus que le texte de la tête

, Section de gauche et section droite ne s'affiche pas dans le texte de l'ellipsis. Maintenant, dans la section suivante, nous appliquerons la propriété de superficie de texte avec d'autres propriétés qui aideront à faire le texte avec l'ellipsis (…).

Comment utiliser des ellipses de superfile de texte dans CSS?

La propriété Text-Overflow fonctionne en combinaison avec les autres propriétés White Space avec valeur Nowrap, déborde avec valeur cachée:

Espace blanc: Nowrap;
débordement caché;
Text-overflow: ellipsis;

La description des propriétés est mentionnée ci-dessous:

• "espace blanc«Propriété avec la valeur»nowrap”Est ​​utilisé pour ajuster le texte en ligne droite.
• "débordement«Propriété avec la valeur»caché"Est utilisé pour cacher le texte de débordement.
• "contre-flux«Propriété avec la valeur»ellipse"Est utilisé pour transformer le texte en une ellipse.

Sortir

C'est ça! Nous avons réussi à savoir pourquoi les ellipses de contre-flux CSS ne fonctionnent pas et comment le réparer.

Conclusion

Dans CSS, la propriété Text-Overflow peut se voir attribuer la valeur Ellipsis. Mais ça ne fonctionnera pas seul. L'ellipsis fonctionne sur l'élément qui est réglé dans «pixels», La propriété de l'espace blanc doit être spécifiée comme«nowrap», Et la valeur de la propriété de débordement comme«caché". Cet article a démontré comment fonctionne la propriété CSS Text-Overflow avec la valeur que fonctionne et a fourni un exemple pertinent.