Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akci až 30 % zdarma při nákupu e-learningu - Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
discount 30 + hiring

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

 

Všechny články v sekci
Text a písmo - CSS vlastnosti
Článek pro vás napsal David Čápka
Avatar
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

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.