Un Ellipsi è un segno di punteggiatura composto da tre punti che vengono utilizzati per indicare l'assenza di una parola, un paragrafo, una citazione o altro ancora. Spesso nella finzione, abbiamo utilizzato le ellipsi per indicare esitazione o qualcosa per costruire la curiosità. Più specificamente, queste ellissi vengono utilizzate in cui la frase non è completata. Quindi, per mostrare ellipsi sulla tua pagina web, il overflow di proprietà CSS con valore ellipsis può essere utilizzato.

Questo articolo ti guiderà attraverso il motivo per cui la proprietà di text-overflow con valore ellipsis non funziona.

Perché le ellipsis di testo non funzionano in CSS?

Discuteremo l'argomento dichiarato usando una dimostrazione pratica.

Per fare ciò, in HTML, prima, aggiungi un elemento div con il nome di classe "principale". Poi aggiungi

elemento da aggiungere un intestazione alla pagina web, un div con il nome della classe "sottosezione"Che contiene due classi DIV,"sezione a sinistra" E "sezione destra". Questi due elementi Div contengono

elementi per l'intestazione e quindi alcuni contenuti vengono aggiunti loro. Finalmente, a

Il tag viene aggiunto per aggiungere un po 'di contenuto.

Html

Benvenuti alla scuola Linuxhint

Educazione di qualità

Forniamo istruzione di qualità al mondo!

Scrittura di articoli

Un autore tecnico scrive articoli su argomenti di informatica.

Puoi imparare tutti gli argomenti di informatica dal sito Web LinuxHint. La nostra prima priorità è il nostro pubblico.

La struttura della pagina Web è completata e può essere vista nell'immagine seguente:

La prossima sezione dimostrerà come applicare le proprietà di stile agli elementi HTML. A tale scopo, aggiungi la proprietà "text-overflow"Con il valore"ellissi" al

elemento, "sezione a sinistra", E "sezione destra". Vediamo cosa accadrà quando questa proprietà viene applicata agli elementi.

Style Main Div

.principale
larghezza: 500px;
Margine: 2px Auto;
imbottitura: 8px;
raggio di confine: 10px;
Background-color: #432C7A;
Colore: Ghostwhite;

IL ".principale"Si riferisce all'elemento Div con nome di classe principale. La descrizione delle proprietà CSS applicate è riportata di seguito:

• "larghezza"La proprietà viene utilizzata per impostare la larghezza dell'elemento su"500px".
• "margineLa proprietà "è impostata su"2px Auto"Che specificherà uno spazio di 2px nella parte superiore-fondo e lo stesso spazio ai lati a sinistra a destra del div.
• "imbottitura"Proprietà con il valore"8px"Aggiunge uno spazio di 8px attorno al contenuto del Div Main.
• "raggio di confine"La proprietà fa arrotondare gli angoli dell'elemento div.
• "colore di sfondo"La proprietà imposta il colore specificato sullo sfondo dell'elemento.
• "colore"La proprietà imposta il colore sul carattere dell'elemento.

Elemento di stile P

.principale,
.sezione a sinistra,
.sezione destra p
Font-size: 18px;

IL

L'elemento della divisione Div principale, a sinistra e sezione destra è fornita con il "dimensione del font" COME "18px".

Stile H1 Elemento del div principale

.Main H1
text-overflow: ellipsis;

Utilizzare il "text-overflow"Proprietà con il valore"ellipsi" al

Elemento del Div Main.

STYLE SUBSECTION DIV

.sottosezione
display: flex;

L'elemento div con il nome di classe "sottosezione"Viene applicato con la proprietà del display"flettere"Per rendere un layout flessibile e reattivo.

Stile Div della sezione sinistra

.sezione sinistra
Background-color: #FA9393;
imbottitura: 3px;
Margine: 1px;
raggio di confine: 10px;

IL ".sezione a sinistra"Si riferisce alla sezione sinistra della classe dell'elemento Div. Di seguito è riportata la spiegazione delle proprietà applicate a questo elemento Div:

• "colore di sfondo"La proprietà applica il colore allo sfondo dell'elemento.
• "imbottitura"La proprietà produce uno spazio attorno al contenuto del div a sezione sinistra.
• "margine"La proprietà produce uno spazio attorno all'elemento Div della sezione sinistra.
• "raggio di confine"La proprietà fa i bordi appuntiti.

Stile Div sezione destra

.sezione destra
Background-color: #ff8fb1;
imbottitura: 3px;
Margine: 1px;
text-overflow: ellipsis;
raggio di confine: 10px;

Le seguenti proprietà vengono applicate all'elemento Div con il nome della classe "sezione destra":

• "colore di sfondo"La proprietà applica il colore allo sfondo dell'elemento.
• "imbottitura"La proprietà aggiunge spazio attorno al contenuto del Div della sezione sinistra.
• "margine"La proprietà aggiunge spazio attorno all'elemento div a sezione sinistra.
• "text-overflow"Con il valore Ellipsis viene utilizzato per segnalare all'utente che l'overflow di questo testo è nascosto.
• "raggio di confine"La proprietà viene utilizzata per convertire i bordi dell'elemento in rotonda.

Fornendo il codice sopra, il risultato viene visualizzato come segue:

Può essere visto nell'immagine sopra che il testo di intestazione

, La sezione sinistra e la sezione destra non sono visualizzate nel testo di Ellipsis. Ora, nella prossima sezione, applicheremo la proprietà di testo su fuoristrada con altre proprietà che aiuteranno a creare il testo con le ellipsis (...).

Come utilizzare l'ellissi di testo su fuoristrada in CSS?

Il testo di testo di proprietà funziona in combinazione con le altre proprietà dello spazio bianco con valore NowRap, trabocco con valore nascosto:

Spazio bianco: nowrap;
Overflow: nascosto;
text-overflow: ellipsis;

La descrizione delle proprietà è menzionata di seguito:

• "spazio bianco"Proprietà con il valore"nowrap"Viene utilizzato per regolare il testo in linea retta.
• "overflow"Proprietà con il valore"nascosto"Viene utilizzato per nascondere il testo di Overflow.
• "text-overflow"Proprietà con il valore"ellipsi"Viene utilizzato per trasformare il testo in un'ellissi.

Produzione

Questo è tutto! Abbiamo imparato con successo perché l'Ellipsis di testo overflow CSS non funziona e come risolverlo.

Conclusione

In CSS, la proprietà text-overflow può essere assegnata il valore ellissi. Ma non funzionerà da solo. L'Ellipsis funziona sull'elemento che è la larghezza è impostata in "Pixel", La proprietà dello spazio bianco deve essere specificata come"nowrap", E il valore della proprietà di Overflow come"nascosto". Questo articolo ha dimostrato come funziona la proprietà di testo overflow CSS con il valore Ellipsis e ha fornito un esempio pertinente.