CSS -tekseffekte
CSS -teksoorloop, woordomvou, reëlbrekingsreëls en skryfmodusse
In hierdie hoofstuk sal jy leer oor die volgende eienskappe:
text-overflowword-wrapword-breakwriting-mode
CSS-teksoorloop
Die CSS- text-overfloweienskap spesifiseer hoe oorvol inhoud wat nie vertoon word nie, aan die gebruiker aangedui moet word.
Dit kan geknip word:
Dit is 'n lang teks wat nie in die boks sal pas nie
of dit kan as 'n ellips weergegee word (...):
Dit is 'n lang teks wat nie in die boks sal pas nie
Die CSS-kode is soos volg:
Voorbeeld
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;
}
Die volgende voorbeeld wys hoe jy die oorvol inhoud kan vertoon wanneer jy oor die element beweeg:
Voorbeeld
div.test:hover {
overflow: visible;
}
CSS-woordomslag
Die CSS word-wrap-eienskap laat toe dat lang woorde gebreek kan word en op die volgende reël toegedraai kan word.
As 'n woord te lank is om binne 'n area te pas, brei dit uit na buite:
Hierdie paragraaf bevat 'n baie lang woord: dit is 'n baie baie baie baie baie lang woord. Die lang woord sal breek en omvou na die volgende reël.
Die woordomvou-eienskap laat jou toe om die teks te dwing om te omvou - selfs al beteken dit om dit in die middel van 'n woord te verdeel:
Hierdie paragraaf bevat 'n baie lang woord: dit is 'n baie baie baie baie baie lang woord. Die lang woord sal breek en omvou na die volgende reël.
Die CSS-kode is soos volg:
Voorbeeld
Laat toe dat lang woorde gebreek kan word en omvou op die volgende reël:
p {
word-wrap: break-word;
}
CSS Woordbreek
Die CSS word-break-eienskap spesifiseer lynbreekreëls.
Hierdie paragraaf bevat 'n bietjie teks. Hierdie reël sal-breek-by-koppeltekens.
Hierdie paragraaf bevat 'n bietjie teks. Die lyne sal by enige karakter breek.
Die CSS-kode is soos volg:
Voorbeeld
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
CSS-skryfmodus
Die CSS writing-mode-eienskap spesifiseer of teksreëls horisontaal of vertikaal uitgelê word.
Sommige teks met 'n span-element met 'nvertikale-rlskryf-modus.
Die volgende voorbeeld toon 'n paar verskillende skryfmetodes:
Voorbeeld
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
CSS Tekseffek eienskappe
Die volgende tabel lys die CSS teks effek eienskappe:
| 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 |