Slevový týden - Březen C# týden
Využij náš slevový týden a získej až 30 % bodů navíc zdarma! Zároveň také probíhá C# týden se slevou na e-learning až 80 %
Hledáme fulltime programátora do ITnetwork týmu -100% homeoffice, 100% časově flexibilní #bezdeadlinu Mám zájem!

text-overflow - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti text-overflow nastavujeme chování vytékání textu z HTML elementu. Pokud se text nevejde do elementu, ve kterém je obsažen a je nastaveno, že nemá vytékat, může být zkrácen nebo nahrazen jiným textem.

Hodnoty

  • clip (výchozí) - Text je zkrácen na nejvyšší možnou délku, která se do elementu vejde.
  • ellipsis - Text je zkrácen na nejvyšší možnou délku, která se do elementu vejde a je zakončen trojtečkou.
  • zástupný text - Můžeme uvést zástupný text, který se zobrazí místo původního textu v případě, že se do elementu celý nevejde.

Ukázka

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Je důležité nastavit i obecnou vlastnost overflow a white-space.

<!DOCTYPE html>
<html>
        <head>
                <style>
                #nahled
                {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        border: 1px solid blue;
                        width: 300px;
                        height: 1.2em;
                }
                </style>
        </head>
        <body>
                <div id="nahled">Toto je náhled delšího textu, který se do elementu nevejde a proto bude zkrácen.</div>
        </body>
</html>

Výsledek:

Ukázka vytékání textu přes CSS

 

 

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Všechny články v sekci
Text a písmo - CSS vlastnosti
Aktivity (1)

 

 

Komentáře

Avatar
Martin Plesh
Člen
Avatar
Martin Plesh:27.4.2015 14:55

Jde to udělat i s nastavením výšky...?

např.
Toto je náhled delšího
textu, který se do elementu
nevejde a proto bude...

Odpovědět
27.4.2015 14:55
Když nejde o život, tak o ho*no jde.
Avatar
Martin Plesh
Člen
Avatar
Martin Plesh:27.4.2015 15:17

Tak si asi odpovím sám, protože už jsem našel odpověď a třeba se to někomu bude hodit :`

http://vool.cz/x6NGf

Odpovědět
27.4.2015 15:17
Když nejde o život, tak o ho*no jde.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Martin Plesh
Člen
Avatar
Odpovídá na Martin Plesh
Martin Plesh:27.4.2015 15:24

A ještě výsledek ;)

Odpovědět
27.4.2015 15:24
Když nejde o život, tak o ho*no jde.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.