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

HTML a CSS Manuál Text a písmo 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

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

 

  Aktivity (1)

Manuál 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 se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Miniatura
Všechny články v sekci
Text a písmo - CSS vlastnosti

 

 

Komentáře

Avatar
Martin Plesh
Člen
Avatar
Martin Plesh:

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:

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.
Avatar
Martin Plesh
Člen
Avatar
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.