Vlastnosť overflow-wrap
Vlastnosť overflow-wrap umožňuje preniesť
písmená dlhého slova na nový riadok, ak
sa toto slovo nezmestí do šírky kontajnera.
Syntax
selektor {
overflow-wrap: break-word | normal;
}
Hodnoty
| Hodnota | Popis |
|---|---|
break-word |
Núti dlhé slová sa prelomiť na nový riadok, ak sa slovo nezmestí do kontajnera. Slovo sa pri tom začne na novom riadku. |
normal |
Štandardné správanie: ak sa dlhé slovo nezmestí do šírky kontajnera - jednoducho presahuje jeho okraj (pričom sa začne na novom riadku). |
Predvolená hodnota: normal.
Príklad . Hodnota normal
V tomto príklade sa veľmi dlhé slovo nezmestí do kontajnera a prekročí jeho hranice (pričom sa začne na novom riadku):
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur adipiscing elit.
</div>
#elem {
word-wrap: normal;
overflow-wrap: normal;
border: 1px solid red;
width: 200px;
}
:
Príklad . Hodnota break-word
A teraz sa písmená, ktoré sa nezmestili, jednoducho prelomia na ďalší riadok (pričom dlhé slovo sa aj tak bude začínať na novom riadku):
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur adipiscing elit.
</div>
#elem {
overflow-wrap: break-word;
border: 1px solid red;
width: 200px;
}
:
Pozri tiež
-
vlastnosť
word-break,
ktorá tiež umožňuje preniesť písmená dlhého slova na nový riadok -
vlastnosť
word-wrap,
ktorá je zastaraným názvom pre vlastnosť overflow-wrap -
vlastnosť
hyphens,
ktorá zapína delenie slov na slabiky -
prvok
wbr,
ktorý implementuje mäkké prelomenia pomocou HTML -
prvok
br,
pomocou ktorého možno vynútiť prelomenie textu na nový riadok