CSS: Přetékání textu přes kontejner
Při práci na hlavní straně bombaauto.cz došlo k situaci, kdy text nadpisu přetékal kontejner ve kterém byl umístěný, pokud byl text příliš dlouhý.
[](http://res.cloudinary.com/marb/image/upload/v1416098764/css2_1-nadpis-preteka-kontejner_unnvtr.png)Nadpis přetéká kontejner
To je samozřejmě něco, co nechceme *(pozn. pokud jste se zarazili nad nesmyslným názvem auta Porsche Panamera Bumblebee 4.0 TDI, tak se nedivím ;-) Slouží to pouze pro ilustraci. Porsche nedělá 4-litrový naftový motor a Bumblebee je Chevrolet Camaro v edici kterou znáte z filmu Transformers. Zkomolenina Bumblbee je samozřejmě záměr ;-)*.
První věc, která mě napadla bylo použití overflow.
overflow: hidden;
[](http://res.cloudinary.com/marb/image/upload/v1416098761/css2_1-nadpis-preteka-kontejner-overflow_fz4uiv.png)Nadpis už nepřetéká, ale k radosti to také není
Overflow nezpůsobilo záměnu písmena “B” za “E”, ale jen to tak nešikovně ořízlo. Bude tedy lepší použít `text-overflow: ellipsis;` – to jednak přebytečný text ořízne, ale uživatel i vidí, že k tomu dlošlo.
[](http://res.cloudinary.com/marb/image/upload/v1416098758/css2_1-nadpis-preteka-kontejner-overflow-ellipsis_d6rmu4.png)Už je to lepší, ale...
Celý kód je
text-overflow: ellipsis;<br></br>
overflow: hidden;```
Funguje to, nevypadá to špatně, ale v nadpisu by bylo asi lepší, kdyby uživatel viděl nadpis celý. Zatím jsem používal CSS 2.1. Nejlepší bude použít CSS 3. Tam máme šikovnou vlastnost word-wrap a hodnotu break-word `word-wrap:break-word;` která zalomí text na další řádek aniž by ho zkracovala.
<div class="wp-caption alignnone" id="attachment_336" style="width: 265px">[](http://res.cloudinary.com/marb/image/upload/v1416098756/css3-nadpis-preteka-kontejner-word-wrap_aqpyvj.png)CSS3 word-wrap a je hotovo
</div>Word-wrap funguje ve všech prohlížečích Chrome, Opera, Safari, Firefox i IE9 bez problémů. Ve většině případů. Někdy se stane, že délka slova vyjde tak, že se první písmeno odtrhne tak, jak se uvádí v [dokumentaci ](http://msdn.microsoft.com/en-us/library/ie/ms531186(v=vs.85).aspx)pro IE9.Když je tam “break” (rozbít) tak ho utrhneme a odtrhne se “B” od zbytku slova. Není to ideální, ale je to podle mě pořád lepší než používání tří teček jako v předešlém případě.Nejčastěji (pravidelně) to dělá IE9, FF, Chrome (resp. WebKit, takže i Safari) občas (nebo nevím co to mohlo způsobit, ale když jsem tenhle článek psal, fungovalo to v Chrome stejně jako v Opeře, teď už ne), Opera to samé dělí podle mezery (ne nadarmo je to nejlepší webový prohlížeč, a k tomu je i nejchytřejší… ;-).
Pokud bychom chtěli problém vyřešit tak, aby to bylo bez roztržení slova, buď bychom museli použít JavaScript (jQuery třeba) nebo na úrovni C# (PHP… čeho chcete), poškádlit regex, což mi přijde jako kanón na vrabce.
Použití CSS3 je ale přesně ta chvíle, kdy se s vámi přestane kamarádit Visual Studio 2010. V mém případě i přesto, že podpora CSS3 byla nainstalovaná.
<div class="wp-caption alignnone" id="attachment_337" style="width: 310px">[](http://res.cloudinary.com/marb/image/upload/v1416098753/visual-studio-2010-css2_1-error_n7pmau.png)Validation CSS 2.1: word-wrap is not a known CSS property name
</div>Takže následuje reinstalace [CSS 3 Intellisense Schema](http://visualstudiogallery.msdn.microsoft.com/7211bcac-091b-4a32-be2d-e797be0db210 "CSS 3 Intellisense Schema"). *(pozn. Před instalací byste měli mít nainstalováný VS 2010 SP1.)*
<div class="wp-caption alignnone" id="attachment_339" style="width: 310px">[](http://res.cloudinary.com/marb/image/upload/v1416098748/css3_intellisense_schema_ycxbmr.png)NuGet CSS3 Intellisense Schema
</div><div class="wp-caption alignnone" id="attachment_338" style="width: 310px">[](http://res.cloudinary.com/marb/image/upload/v1416098751/css3_style__sheet__utzcog.png)CSS 3 Style Sheet
</div>