Textové efekty CSS
Přetečení textu CSS , zalamování slov, pravidla zalamování řádků a režimy psaní
V této kapitole se dozvíte o následujících vlastnostech:
text-overflow
word-wrap
word-break
writing-mode
Přetečení textu CSS
Vlastnost CSS text-overflow
určuje, jak má být uživateli signalizován přetečený obsah, který se nezobrazuje.
Dá se oříznout:
Toto je dlouhý text, který se nevejde do rámečku
nebo jej lze vykreslit jako elipsu (...):
Toto je dlouhý text, který se nevejde do rámečku
CSS kód je následující:
Příklad
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;
}
Následující příklad ukazuje, jak můžete zobrazit přetečený obsah, když umístíte kurzor na prvek:
Příklad
div.test:hover {
overflow: visible;
}
CSS zalamování slov
Vlastnost CSS word-wrap
umožňuje rozdělit dlouhá slova a zalomit je na další řádek.
Pokud je slovo příliš dlouhé a nevejde se do oblasti, rozšíří se mimo:
Tento odstavec obsahuje velmi dlouhé slovo: toto je velmi dlouhé slovo. Dlouhé slovo se zlomí a zalomí na další řádek.
Vlastnost word-wrap vám umožňuje vynutit zalamování textu – i když to znamená jeho rozdělení uprostřed slova:
Tento odstavec obsahuje velmi dlouhé slovo: toto je velmi dlouhé slovo. Dlouhé slovo se zlomí a zalomí na další řádek.
CSS kód je následující:
Příklad
Umožněte, aby bylo možné dělit dlouhá slova a zalomit je na další řádek:
p {
word-wrap: break-word;
}
CSS Word Breaking
Vlastnost CSS word-break
určuje pravidla zalamování řádků.
Tento odstavec obsahuje nějaký text. Tento řádek se zalomí na pomlčky.
Tento odstavec obsahuje nějaký text. Řádky se přeruší u jakéhokoli znaku.
CSS kód je následující:
Příklad
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
Režim psaní CSS
Vlastnost CSS writing-mode
určuje, zda jsou řádky textu rozloženy vodorovně nebo svisle.
Nějaký text s prvkem span s a vertikální-rl režim psaní.
Následující příklad ukazuje některé různé režimy zápisu:
Příklad
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
Vlastnosti textového efektu CSS
V následující tabulce jsou uvedeny vlastnosti textového efektu 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 |