A word-break tulajdonság

A word-break tulajdonság lehetővé teszi egy hosszú szó betűinek új sorba törését, ha ez a szó nem fér el a tároló szélességében.

Szintaxis

cssszelektor {
  word-break: break-all | keep-all | normal;
}

Értékek

Érték Leírás
break-all Kényszeríti a hosszú szavak új sorba törését, ha a szó nem fér el a tárolóban.
keep-all Ideogrammok töréséhez.
normal Alapértelmezett viselkedés: ha egy hosszú szó nem fér el a tároló szélességében – az egyszerűen kilóg a határain (de új sorban kezdődik).

Alapértelmezett érték: normal.

Példa . Normal érték

Ebben a példában egy nagyon hosszú szó nem fog elférenni a tárolóban és kilóg a határain belül (de új sorban kezdődik):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>
css#elem {
  width: 200px;
  word-break: normal;
  border: 1px solid red;
}

Результат:

Példa . Break-all érték

Most viszont azok a betűk, amelyek nem fértek el, egyszerűen átkerülnek a következő sorba:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>
css#elem {
  width: 200px;
  word-break: break-all;
  border: 1px solid red;
}

Результат:

Lásd még

  • a overflow-wrap tulajdonság,
    amely szintén lehetővé teszi egy hosszú szó betűinek új sorba törését
  • a hyphens tulajdonság,
    amely bekapcsolja a szavak szótagolásos törését
  • a overflow tulajdonság,
    amely levágja a blokk határain kilógó részeket
  • a wbr tag,
    amely puha kötőjeleket valósít meg HTML eszközökkel
  • a br tag,
    amelynek segítségével kényszeríthető a szöveg új sorba törése