Přetečení textu - Triky CSS

text-overflowNemovitost v CSS se zabývá situací, kdy je textový zastřiženými když to přeteče okno schema prvku. Lze jej oříznout (tj. Oříznout, skrýt), zobrazit elipsu („…“, Unicode Range Value U + 2026) nebo zobrazit autorem definovaný řetězec (žádná aktuální podpora prohlížeče pro řetězce definované autorem).

.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )

Všimněte si, že text-overflowk tomu dojde pouze v případě, že overflowvlastnost kontejneru má hodnotu hidden, scrollnebo autoa white-space: nowrap;.

K přetečení textu může dojít pouze u prvků na úrovni bloku nebo vloženého bloku, protože prvek musí mít šířku, aby mohl být přetečen. Přetečení nastává ve směru určeném vlastností direction nebo souvisejícími atributy.

Následující ukázka zobrazuje chování text-overflowvlastnosti včetně všech možných hodnot. Podpora prohlížeče se liší!

Podívejte se na toto pero!

Nastavení overflowna scrollnebo autozobrazí posuvníky, které odhalí další text, zatímco hiddennebude. Skrytý text lze vybrat výběrem elips.

Stará věc

Stará verze specifikace říká, že k obrázku pro elipsu můžete použít adresu URL, ale vypadá to, jako by byla zrušena.

Existuje syntaxe dvou hodnot, např text-overflow: ellipsis ellipsis;. Která by řídila přetečení na levé a pravé straně stejného kontejneru. Nejsem si jistý, jak by toho bylo možné dosáhnout. Možná centrovaný text v příliš malém kontejneru? Nová specifikace říká, že toto je stejně jako definice řetězce „ohroženo“.

Nejsem si jistý, odkud ellipsis-wordpochází. Není ve specifikaci ani v jiné dokumentaci jiné než na WebPlatform.org.

text-overflowVlastnost býval zkratka pro kombinaci text-overflow-modea text-overflow-ellipsis, ale teď už ne, a ty zvláštní vlastnosti neexistují.