Overflow-wrap հատկություն

overflow-wrap հատկությունը թույլ է տալիս տեղափոխել երկար բառի տառերը նոր տող, եթե այդ բառը չի տեղավորվում կոնտեյների լայնության մեջ:

Շարահյուսություն

cssընտրիչ {
  overflow-wrap: break-word | normal;
}

Արժեքներ

Լռելյայն արժեքը՝ normal:

Օրինակ . Normal արժեք

Այս օրինակում շատ երկար բառը չի տեղավորվի կոնտեյներում և դուրս կգա նրա սահմաններից (այդ դեպքում այն կսկսվի նոր տողից):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  word-wrap: normal;
  overflow-wrap: normal;
  border: 1px solid red;
  width: 200px;
}

Результат:

Օրինակ . Break-word արժեք

Իսկ այժմ այն տառերը, որոնք չէին տեղավորվում, պարզապես կտեղափոխվեն հաջորդ տող (այդ դեպքում երկար բառը այնուամենայնիվ կսկսվի նոր տողից):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow-wrap: break-word;
  border: 1px solid red;
  width: 200px;
}

Результат:

Տես նաև