Ιδιότητα text-overflow

Η ιδιότητα text-overflow προσθέτει αποσιωπητικά στο τέλος περικομμένου κειμένου ως ένδειξη ότι το κείμενο δεν χωρούσε στο μπλοκ και περικόπηκε.

Για να λειτουργήσει η ιδιότητα, το κείμενο πρέπει να περικοπεί μέσω της ιδιότητας overflow ή της ιδιότητας overflow-x με τιμή hidden, auto ή scroll. Εάν οριστεί visible (που είναι η προεπιλεγμένη τιμή) - η text-overflow δεν θα λειτουργήσει.

Σύνταξη

επιλογέας {
	text-overflow: ellipsis | clip;
}

Τιμές

Τιμή	Περιγραφή
`ellipsis`	Προσθέτει αποσιωπητικά στο τέλος περικομμένου κειμένου.
`clip`	Δεν προσθέτει αποσιωπητικά στο τέλος (αυτή είναι η προεπιλεγμένη τιμή, χρησιμοποιείται για ακύρωση της δράσης της ιδιότητας όταν χρειάζεται).

Προεπιλεγμένη τιμή: clip.

Παράδειγμα . Κείμενο που ξεπερνά τα όρια

Σε αυτό το παράδειγμα, μια πολύ μεγάλη λέξη δεν θα χωρέσει στο περιέκτη και θα ξεπεράσει τα όριά του. Δεν πραγματοποιείται καμία περικοπή:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: visible;
	border: 1px solid red;
}

Παράδειγμα . Προσθήκη της ιδιότητας overflow

Τώρα, ό,τι ξεπερνά τα όρια του περιέκτη, απλώς θα περικοπεί:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	border: 1px solid red;
}

Παράδειγμα . Τιμή ellipsis

Τώρα, εκτός από την ιδιότητα overflow θα προσθέσουμε και την text-overflow με τιμή ellipsis. Στο περικομμένο κείμενο θα προστεθούν αποσιωπητικά στο τέλος:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Παράδειγμα . Με γραμμές κύλισης

Εάν ορίσετε overflow: auto και text-overflow: ellipsis, τότε θα εμφανιστεί μια γραμμή κύλισης, αλλά τα αποσιωπητικά θα παραμείνουν. Δοκιμάστε να κάνετε κύλιση στη γραμμή κύλισης στο παράδειγμα:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Παράδειγμα . Εάν δεν υπάρχουν πολύ μεγάλες λέξεις

Εάν δεν υπάρχουν τόσο μεγάλες λέξεις ώστε να ξεπεράσουν τα όρια του περιέκτη, τότε δεν θα πραγματοποιηθεί περικοπή (τίποτα δεν ξεπερνά τα όρια). Δείτε το ακόλουθο παράδειγμα:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Παράδειγμα . Κείμενο σε μία γραμμή

Ωστόσο, υπάρχουν περιπτώσεις όπου θέλουμε το κείμενο να περικόπτεται, εάν είναι πολύ μεγάλο (το κείμενο γενικά, και όχι μεμονωμένες λέξεις) και να μην μεταφέρεται στην επόμενη γραμμή. Αυτό γίνεται με την προσθήκη της ιδιότητας white-space με τιμή nowrap, η οποία απαγορεύει τη μεταφορά κειμένου σε άλλη γραμμή. Δείτε το παράδειγμα, τώρα το κείμενο περικόπτεται:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Παράδειγμα . Πλάτος σε ποσοστά

Εάν ορίσετε το πλάτος του μπλοκ σε %, τότε η περικοπή θα λειτουργεί επίσης σωστά:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 80%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Δείτε επίσης

οι ιδιότητες word-break και overflow-wrap,
που επιτρέπουν τη μεταφορά γραμμάτων μιας μεγάλης λέξης σε νέα γραμμή
η ιδιότητα hyphens,
που ενεργοποιεί τη σύνθεση λέξεων σε συλλαβές
η ιδιότητα overflow,
που περικόπτει τα μέρη που ξεπερνούν τα όρια του μπλοκ