Vlastnost CSS text-overflow
Příklad
Použití vlastnosti text-overflow:
div
{
white-space: nowrap;
overflow:
hidden;
text-overflow: ellipsis;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Tato text-overflow
vlastnost určuje, jak má být uživateli signalizován přetečený obsah, který se nezobrazuje. Může být oříznut, zobrazit tři tečky (...) nebo zobrazit vlastní řetězec.
Pro přetečení textu jsou vyžadovány obě následující vlastnosti:
- white-space: nowrap;
- přepad: skrytý;
Výchozí hodnota: | klip |
---|---|
Zděděno: | Ne |
Animovatelné: | Ne. Přečtěte si o tématu Animable |
Verze: | CSS3 |
Syntaxe JavaScriptu: | objekt .style.textOverflow="elipsa" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Čísla následovaná -o- určují první verzi, která pracovala s předponou.
Property | |||||
---|---|---|---|---|---|
text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
Syntaxe CSS
text-overflow: clip|ellipsis|string|initial|inherit;
Hodnoty vlastností
Value | Description | Play it |
---|---|---|
clip | Default value. The text is clipped and not accessible | |
ellipsis | Render an ellipsis ("...") to represent the clipped text | |
string | Render the given string to represent the clipped text | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Další příklady
Příklad
Přetečení textu s efektem najetí myší (zobrazit celý text při najetí myší):
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
Související stránky
CSS tutoriál: CSS Text Effects
Odkaz HTML DOM: vlastnost textOverflow