Εφέ Κειμένου CSS

CSS Υπερβολή Κειμένου, Μεταβίβαση Κινήτρων, Πρότυπα Κατανομής Γραμμών και Μέθοδος Γράψης

Σε αυτό το κεφάλαιο, θα μάθετε τις εξής ιδιότητες:

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

CSS Υπερβολή Κειμένου

CSS text-overflow Η ιδιότητα καθορίζει πώς θα παρουσιαστεί στο χρήστη το περιεχόμενο που δεν φαίνεται.

Μπορεί να κόψει:

Αυτό είναι ένα μακρύ κείμενο που δεν μπορεί να φιλοξενηθεί μέσα σε κουτί. Αυτό είναι ένα μακρύ κείμενο που δεν μπορεί να φιλοξενηθεί μέσα σε κουτί

Μπορεί επίσης να το παρουσιάσει με σημεία ελλειψή (...):

Αυτό είναι ένα μακρύ κείμενο που δεν μπορεί να φιλοξενηθεί μέσα σε κουτί. Αυτό είναι ένα μακρύ κείμενο που δεν μπορεί να φιλοξενηθεί μέσα σε κουτί

Ο κώδικας CSS είναι ο εξής:

Παράδειγμα

p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip; 
}
p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

Δοκιμάστε το προσωπικά

Το παρακάτω παράδειγμα παρουσιάζει πώς εμφανίζονται τα περιττά περιεχόμενα όταν το ποντίκι βρίσκεται πάνω στο στοιχείο:

Παράδειγμα

div.test:hover {
  overflow: visible;
}

Δοκιμάστε το προσωπικά

CSS Χρήση γραμμής (Word Wrapping)

CSS word-wrap Η ιδιότητα επιτρέπει τη διακοπή μακρών κειμένων και τη μεταφορά τους στη γραμμή που ακολουθεί.

Αν μια λέξη είναι πολύ μακρά και δεν μπορεί να περιέχεται σε μια περιοχή, θα επεκταθεί προς τα έξω:

Αυτό το παρακείμενο περιέχει μια πολύ μακρά λέξη: thisisaveryveryveryveryveryverylongword. Η μακρά λέξη θα διακοπεί και θα μεταφερθεί στη γραμμή που ακολουθεί.

Με τη χρήση της ιδιότητας word-wrap, μπορείτε να αναγκάσετε το κείμενο να διακοπεί - ακόμα και αν αυτό σημαίνει τη διακοπή ενός λόγου στη μέση του:

Αυτό το παρακείμενο περιέχει μια πολύ μακρά λέξη: thisisaveryveryveryveryveryverylongword. Η μακρά λέξη θα διακοπεί και θα μεταφερθεί στη γραμμή που ακολουθεί.

Ο κώδικας CSS είναι ο εξής:

Παράδειγμα

Επιτρέπει την διακοπή μακρών λέξεων και τη μεταφορά τους στη γραμμή που ακολουθεί:

p {
  word-wrap: break-word;
}

Δοκιμάστε το προσωπικά

Κανόνες διαίρεσης γραμμής CSS

CSS word-break Η ιδιότητα καθορίζει τις κανόνες της διαίρεσης γραμμής.

Αυτό το παρακείμενο περιέχει κάποιες λέξεις. Αυτή η γραμμή θα διακοπτεί στους κρίκους:

Αυτό το παρακείμενο περιέχει κάποιες λέξεις. Αυτή η γραμμή θα διακοπτεί στους κρίκους.

Αυτό το παρακείμενο περιέχει κάποιες λέξεις. Οι γραμμές θα διακοπτούν σε οποιοδήποτε χαρακτήρα:

Αυτό το παρακείμενο περιέχει κάποιες λέξεις. Οι γραμμές θα διακοπτούν σε οποιοδήποτε χαρακτήρα.

Ο κώδικας CSS είναι ο εξής:

Παράδειγμα

p.test1 {
  word-break: keep-all;
}
p.test2 {
  word-break: break-all;
}

Δοκιμάστε το προσωπικά

Στυλ γραφής CSS

CSS writing-mode Η ιδιότητα καθορίζει αν η γραμμή κειμένου είναι οριζόντια ή κάθετη.

Κάποιο κείμενο με ένα στοιχείο span που έχει vertical-rl writing-mode.

Η παρακάτω παράδειγμα παρουσιάζει διάφορες μορφές γραφής:

Παράδειγμα

p.test1 {
  writing-mode: horizontal-tb; 
}
span.test2 {
  writing-mode: vertical-rl; 
}
p.test2 {
  writing-mode: vertical-rl; 
}

Δοκιμάστε το προσωπικά

Ιδιότητες αποτελεσμάτων κειμένου CSS

Η παρακάτω τаблицή καταγράφει τις ιδιότητες των αποτελεσμάτων κειμένου CSS:

Ταυτότητα Περιγραφή
text-align-last Ορίζει πώς θα εκτυπώνεται η τελευταία γραμμή κειμένου.
text-justify Ορίζει πώς θα εμφανίζονται και θα διαχωρίζονται τα στοιχεία κειμένου που θα τοποθετηθούν.
text-overflow Ορίζει πώς θα εμφανίζονται τα περιττά περιεχόμενα που δεν φαίνονται.
word-break Ορίζει τους κανόνες διπλανήσωσης για τα γράμματα που δεν είναι CJK.
word-wrap Επιτρέπει τη διακοπή μακρών λέξεων και τη μεταφορά τους στην επόμενη γραμμή.
writing-mode Περιγραφή αν η γραμμή κειμένου είναι τοποθετημένη οριζόντια ή κάθετα.