Σε αυτό το κεφάλαιο θα μάθετε για τις ακόλουθες ιδιότητες:
text-overflow
word-wrap
word-break
writing-modeΗ ιδιότητα CSS text-overflow καθορίζει τον τρόπο υπερχείλισης περιεχομένου που δεν είναι που εμφανίζεται θα πρέπει να σηματοδοτείται στον χρήστη.
Μπορεί να κοπεί:
This is some long text that will not fit in the box
ή μπορεί να αποδοθεί ως έλλειψη (...):
This is some long text that will not fit in the box
Ο κώδικας 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;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h1>The text-overflow Property</h1>
<p>The following two paragraphs contains a long text that will not fit in the box.</p>
<h2>text-overflow: clip:</h2>
<p class="test1">This is some long text that will not fit in the box</p>
<h2>text-overflow: ellipsis:</h2>
<p class="test2">This is some long text that will not fit in the box</p>
</body>
</html>
Το ακόλουθο παράδειγμα δείχνει πώς μπορείτε να εμφανίσετε το υπερχειλισμένο περιεχόμενο όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το στοιχείο:
div.test:hover {
overflow: visible;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div.test {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
}
div.test:hover {
overflow: visible;
}
</style>
</head>
<body>
<p>Hover over the two divs below, to see the entire text.</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<br>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>
Η ιδιότητα CSS word-wrap επιτρέπει στις μεγάλες λέξεις να μπορούν να σπάσουν και να αναδιπλωθούν στην επόμενη γραμμή.
Εάν μια λέξη είναι πολύ μεγάλη για να χωρέσει σε μια περιοχή, επεκτείνεται έξω:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
Η ιδιότητα word-wrap σάς επιτρέπει να αναγκάσετε το κείμενο να αναδιπλωθεί - ακόμα κι αν αυτό σημαίνει να το χωρίσετε στη μέση μιας λέξης:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
Ο κώδικας CSS είναι ο εξής:
Επιτρέψτε στις μεγάλες λέξεις να μπορούν να σπάσουν και να αναδιπλωθούν στην επόμενη γραμμή:
p {
word-wrap: break-word;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
p.test {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
</head>
<body>
<h1>The word-wrap Property</h1>
<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>
Η ιδιότητα CSS word-break καθορίζει κανόνες αλλαγής γραμμής.
This paragraph contains some text. This line will-break-at-hyphens.
This paragraph contains some text. The lines will break at any character.
Ο κώδικας CSS είναι ο εξής:
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.test2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<h1>The word-break Property</h1>
<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>
<p class="test2">This paragraph contains some text. The lines will break at any character.</p>
</body>
</html>
Η ιδιότητα CSS writing-mode καθορίζει είτε οι γραμμές του κειμένου είναι διατεταγμένες οριζόντια ή κάθετα.
Κάποιο κείμενο με στοιχείο span με λειτουργία εγγραφής vertical-rl.
Some text with a span element with a vertical-rl writing-mode.
Το ακόλουθο παράδειγμα δείχνει μερικούς διαφορετικούς τρόπους γραφής:
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
} Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h1>The writing-mode Property</h1>
<p class="test1">Some text with default writing-mode.</p>
<p>Some text with a span element with a <span class="test2">vertical-rl</span> writing-mode.</p>
<p class="test2">Some text with writing-mode: vertical-rl.</p>
</body>
</html>
Ο παρακάτω πίνακας παραθέτει τις ιδιότητες του εφέ κειμένου CSS:
Καθορίζει τον τρόπο με τον οποίο το αιτιολογημένο κείμενο θα πρέπει να ευθυγραμμίζεται και να διαστέλλεται
Καθορίζει τον τρόπο με τον οποίο το υπερχειλισμένο περιεχόμενο που δεν εμφανίζεται θα πρέπει να σηματοδοτείται στον χρήστη
Καθορίζει κανόνες διακοπής γραμμής για σενάρια που δεν είναι CJK
Επιτρέπει τις μεγάλες λέξεις να μπορούν να σπάσουν και να αναδιπλωθούν στην επόμενη γραμμή
Καθορίζει εάν οι γραμμές του κειμένου τοποθετούνται οριζόντια ή κάθετα