Prvek wbr

Prvek wbr označuje místo, kde prohlížeč může v případě potřeby provést zlom řádku (pokud se text nevejde do šířky prvku). Takové zlomy se nazývají měkké.

Nevyžaduje uzavírací prvek.

Při zlomu slova pomocí prvku wbr se symbol zlomu "-" nepřidává. Pokud je potřeba - použijte symbol měkkého zlomu  (středník na konci je povinný, není to překlep).

Měkký zlom  označuje prohlížeči místo, kde může provést zlom slova (v případě potřeby), a přitom umístit symbol zlomu "-".

Měkké zlomy  nebudou fungovat, pokud je vlastnost hyphens nastavena na hodnotu none (ale zlomy wbr budou).

Příklad . Text bez zlomů

Podívejme se na vzorový text, ve kterém jsou dlouhá slova, která přesahují okraje bloku. Bloku nastavíme malou šířku tak, aby se do něj dlouhé slovo nevešlo:

<div id="elem">
	this is supersupersuperlong text
</div>

#elem {
	width: 200px;
	border: 1px solid black;
}

Příklad . Prvek wbr

A zde přidejme prvek wbr na místa, kde doporučujeme prohlížeči provést zlom slova v případě potřeby (všimněte si, že prohlížeč provede zlomy ne všude, kde jsme je uvedli):

<div id="elem">
	this is super<wbr>super<wbr>super<wbr>long text
</div>

#elem {
	width: 200px;
	border: 1px solid black;
}

Příklad . Symbol 

Zkusme místo prvku wbr umístit symbol . Na místech zlomu se zobrazí pomlčky:

<div id="elem">
	this is supersupersuperlong text
</div>

#elem {
	width: 200px;
	border: 1px solid black;
}

Viz také

prvek br,
,
který provádí zlom na nový řádek
vlastnost hyphens,
která nastavuje skutečné zlomy slov
vlastnosti word-break a overflow-wrap,
které umožňují zalomit písmena dlouhého slova
vlastnost overflow,
která ořezává části přesahující okraj bloku

Prvek wbr

Příklad . Text bez zlomů

Příklad . Prvek wbr

Příklad . Symbol &shy;

Viz také

Příklad . Symbol