overflow-wrap Özelliği

overflow-wrap özelliği, bir kelime konteyner genişliğine sığmıyorsa, uzun kelimenin harflerinin yeni bir satıra taşınmasına izin verir.

Sözdizimi

cssseçici {
  overflow-wrap: break-word | normal;
}

Değerler

Varsayılan değer: normal.

Örnek . Normal değeri

Bu örnekte, çok uzun bir kelime konteynere sığmayacak ve sınırlarının dışına taşacaktır (yeni bir satırdan başlayacaktır):

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;
}

Результат:

Örnek . break-word değeri

Şimdi ise sığmayan harfler bir sonraki satıra taşınacaktır (uzun kelime yine de yeni bir satırdan başlayacaktır):

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;
}

Результат:

Ayrıca Bakınız