Efekty tekstowe CSS
Przepełnienie tekstu CSS , zawijanie słów, reguły łamania wierszy i tryby pisania
W tym rozdziale poznasz następujące właściwości:
text-overflowword-wrapword-breakwriting-mode
Przepełnienie tekstu CSS
Właściwość CSS text-overflowokreśla, w jaki sposób przepełniona treść, która nie jest wyświetlana, powinna być sygnalizowana użytkownikowi.
Można go przyciąć:
To jest długi tekst, który nie zmieści się w pudełku
lub może być renderowany jako wielokropek (...):
To jest długi tekst, który nie zmieści się w pudełku
Kod CSS wygląda następująco:
Przykład
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;
}
Poniższy przykład pokazuje, jak wyświetlić przepełnioną zawartość po najechaniu kursorem na element:
Przykład
div.test:hover {
overflow: visible;
}
Zawijanie słów CSS
Właściwość CSS word-wrapumożliwia łamanie długich słów i umieszczanie ich w następnej linii.
Jeśli słowo jest zbyt długie, aby zmieścić się w obszarze, rozszerza się na zewnątrz:
Ten akapit zawiera bardzo długie słowo: tojestbardzobardzobardzobardzobardzobardzodługie słowo. Długie słowo zostanie przerwane i zawinięte do następnej linii.
Właściwość word-wrap pozwala wymusić zawijanie tekstu - nawet jeśli oznacza to podzielenie go w środku słowa:
Ten akapit zawiera bardzo długie słowo: tojestbardzobardzobardzobardzobardzobardzodługie słowo. Długie słowo zostanie przerwane i zawinięte do następnej linii.
Kod CSS wygląda następująco:
Przykład
Pozwól, aby długie słowa można było złamać i zawinąć do następnej linii:
p {
word-wrap: break-word;
}
Łamanie słów CSS
Właściwość CSS word-breakokreśla zasady łamania linii.
Ten akapit zawiera trochę tekstu. Ta linia będzie łamana na myślnikach.
Ten akapit zawiera trochę tekstu. Linie będą się łamać przy każdym znaku.
Kod CSS wygląda następująco:
Przykład
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
Tryb pisania CSS
Właściwość CSS writing-modeokreśla, czy wiersze tekstu są ułożone poziomo czy pionowo.
Jakiś tekst z elementem span zpionowe-rltryb pisania.
Poniższy przykład pokazuje kilka różnych trybów pisania:
Przykład
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
Właściwości efektu tekstowego CSS
W poniższej tabeli wymieniono właściwości efektów tekstowych CSS:
| Property | Description |
|---|---|
| text-justify | Specifies how justified text should be aligned and spaced |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| word-break | Specifies line breaking rules for non-CJK scripts |
| word-wrap | Allows long words to be able to be broken and wrap onto the next line |
| writing-mode | Specifies whether lines of text are laid out horizontally or vertically |