Odřádkování v HTML a CSS

Značka <br>

Jelikož je běžné odřádkování klávesou Enter v HTML kódu většinou chápáno jako nějaký bílý znak bez zvláštního významu, pro vynucení nového řádku slouží značka <br> (má zakázanou koncovou značku).

<p>
  První řádek<br>Druhý řádek
</p>

Výjimkou, kdy se na odřádkování a jiné bílé znaky dbá, je použití CSS předpisu white-space: pre – takový styl má jako výchozí značka <pre>.

Následující kód se tak zobrazí stejně jako při použití <br>. Každá mezera nebo odřádkování hraje svou roli, proto se konec a začátek značky <p> musí nalepit na obsah.

<p 
  style="white-space: pre"
>První řádek
Druhý řádek</p>

Takový postup je lehce riskantní, protože bílé znaky může narušit editor při formátování kódu nebo případná minifikace HTML kódu.

Značka <br> by se neměla používat k vytváření odsazení – k tomu slouží CSS vlastnost margin. Nový řádek jde vytvořit i obalením obsahu do blokového elementu (CSS předpis display: block).

<div>První řádek</div>
<div>Druhý řádek</div>

Elegantnější je ale většinou použít <br> a členit textu do odstavců (<p>).

Nový řádek v HTML atributu

V některých případech je potřeba přidat zalomení řádku do HTML atributu – nejčastěji do obecného atributu title. Existuje více možností.

Entita 


Nejvýhodnější se zdá být entita 
, která na daném místě vytvoří nový řádek.

<span 
  title="První řádek&#10;Druhý řádek"
>
  Text
</span>

Kromě v atributu funguje toto zalomení i ve značce s nastaveným zachováváním bílých znaků (white-space: pre). Místo zalomení řádku v kódu stačí přidat entitu 
 a výsledek je stejný.

Odřádkování v kódu

Nový řádek v atributu se vytvoří i v případě, že bude odřádkování přímo ve zdrojovém HTML kódu.

<span 
  title="První řádek
Druhý řádek"
>
  Text
</span>

Odřádkování \n nefunguje

V programovacích jazycích se často pro nový řádek používá sekvence znaků \n. Jelikož se v HTML pro escapování používají entity s & na začátku, nebude tento postup fungovat a \n se normálně vypíše.

Odřádkování v <textarea>

Textová oblast pro psaní textu – <textarea> – má výchozí styl white-space: pre, takže se v ní nový řádek vytvoří buď odřádkováním přímo v kódu nebo entitou 
.

<textarea>První řádek
Druhý řádek&#10;Třetí řádek</textarea>

Atribut placeholder

U atributu placeholder je postup stejný jako u <textarea> – nový řádek v kódu i entita 
. Zalomení řádku v placeholderu ale nefunguje ve staré Opeře 12 a ani ve Firefoxu 38.

Počet řádků

Počet řádků v <textarea> jde spočítat JavaScriptem:

Zalomení řádku v CSS

V CSS se potřeba vypsání nového řádku týká například vlastnosti content (při použití přes :before/:after). Kaskádové styly nepodporují uvnitř hodnoty vlastnosti řádek zalomit a ani HTML entity, takže se na to musí jít jinak. Řešením je řetězec „\a“. Zároveň je nutné přidat white-space: pre, aby se zalomení vykreslilo.

element:before {
  content: 'První řádek \a Druhý řádek';
  white-space: pre;
}

Tak jde vypsat víceřádkový text do vlastnosti content.