CSS -teksteffecten
CSS -tekstoverloop, woordterugloop, regels voor het afbreken van regels en schrijfmodi
In dit hoofdstuk leert u over de volgende eigenschappen:
text-overflowword-wrapword-breakwriting-mode
CSS-tekstoverloop
De CSS text-overflow-eigenschap specificeert hoe overvolle inhoud die niet wordt weergegeven, moet worden gesignaleerd aan de gebruiker.
Het kan worden geknipt:
Dit is een lange tekst die niet in het vak past
of het kan worden weergegeven als een weglatingsteken (...):
Dit is een lange tekst die niet in het vak past
De CSS-code is als volgt:
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;
}
Het volgende voorbeeld laat zien hoe u de overvolle inhoud kunt weergeven wanneer u de muisaanwijzer over het element beweegt:
Voorbeeld
div.test:hover {
overflow: visible;
}
CSS-woordterugloop
Met de CSS word-wrap-eigenschap kunnen lange woorden worden afgebroken en op de volgende regel worden geplaatst.
Als een woord te lang is om in een gebied te passen, wordt het daarbuiten uitgevouwen:
Deze alinea bevat een heel lang woord: dit is heel heel heel heel heel erg lang. Het lange woord zal breken en naar de volgende regel gaan.
Met de eigenschap word-wrap kunt u de tekst forceren om terug te lopen - zelfs als dit betekent dat u deze in het midden van een woord moet splitsen:
Deze alinea bevat een heel lang woord: dit is heel heel heel heel heel erg lang. Het lange woord zal breken en naar de volgende regel gaan.
De CSS-code is als volgt:
Voorbeeld
Sta toe dat lange woorden kunnen worden afgebroken en op de volgende regel kunnen worden gewikkeld:
p {
word-wrap: break-word;
}
CSS woord breken
De CSS word-break-eigenschap specificeert regels voor het afbreken van regels.
Deze paragraaf bevat enige tekst. Deze regel wordt afgebroken bij koppeltekens.
Deze paragraaf bevat enige tekst. De regels breken bij elk teken.
De CSS-code is als volgt:
Voorbeeld
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
CSS-schrijfmodus
De CSS writing-mode-eigenschap geeft aan of tekstregels horizontaal of verticaal worden opgemaakt.
Wat tekst met een span-element met averticaal-rlschrijfmodus.
Het volgende voorbeeld toont enkele verschillende schrijfmodi:
Voorbeeld
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
Eigenschappen CSS-teksteffect
De volgende tabel bevat de eigenschappen van de CSS-teksteffecten:
| 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 |