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

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

Değer	Açıklama
`break-word`	Uzun kelimeler, konteynere sığmıyorsa yeni bir satıra taşınır. Kelime yeni satırdan başlayacaktır.
`normal`	Standart davranış: Eğer uzun bir kelime konteyner genişliğine sığmıyorsa, sınırlarının dışına taşar (yeni bir satırdan başlayacaktır).

Varsayılan değer: normal.

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):

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

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

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

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

word-break özelliği,
aynı zamanda uzun bir kelimenin harflerinin yeni satıra taşınmasına izin verir
word-wrap özelliği,
overflow-wrap özelliğinin eski adıdır
hyphens özelliği,
kelimelerin hecelere göre taşınmasını etkinleştirir
wbr etiketi,
yumuşak taşmaları HTML araçlarıyla uygular
br etiketi,
metni yeni bir satıra taşımak için zorlamanıza olanak tanır