Vzhůru dolů

CSS: Ukázky zdrojového kódu se šířkou podle obsahu

Pro ukázky zdrojového na tomto blogu nově používám jednoduchý systém — šířka bloku se zdrojovým textem se přizpůsobuje délce obsahu:

Dlouhatánský obsah bude vyčnívat ze šířky bloku s textem tak abychom maximálně využili volný prostor.

Přičemž ovšem naopak krátký obsah neporuší šířku bloku, což uvidíme na druhém příkladu:

Jsem krátký obsah.

CSS kód je přitom jednoduchý:

pre
{
  display: inline-block;
  min-width: 482px;
  overflow: auto;
  max-width: 860px;
}

pre code
{
  white-space: nowrap;
}

Funguje v IE8, FF3, Safari a dalších moderních prohlížečích. Ve starších IE bude mít blok se zdrojovým kódem šířku stejnou jako blok s textem.