وقتی در میان کدهای HTML ، بخواهیم متنی طولانی در خروجی نمایش داده شود، چون عنصری که متن در آن نمایش داده می شود دارای عرضی با اندازه مشخص است، خود به خود متن در چند خط قرار می گیرد تا بخشی از آن در خارج از عنصر مورد نظر قرار نگیرد. معیار اصلی برای رفتن به خط جدید، وجود کاراکتر فضای خالی (space) است که بر اساس آن، سعی می شود که متن در چند خط قرار بگیرد (یعنی اگرچه کاراکتر ((رفتن به خط جدید)) (line break) در آن قسمت از رشته (متن) وجود ندارد، اما برای اینکه متن از عرض عنصر بیشتر نشود، در محل یک کاراکتر فضای خالی (space)، به صورت خودکار، به خط جدید می رویم و بنابراین به این شکل، متن به خوبی در عرض عنصر قرار می گیرد).

اما گاهی اوقات باید متن هایی طولانی و به هم چسبیده (مثل کلیییییییییییییییییییییییییییییییییییدستان) را نمایش بدهیم که در آنها کاراکتر فضای خالی (space) وجود ندارد (یا حداقل در بخش مناسبی از آن وجود ندارد)، بنابراین اگر عرض بخش به هم چسبیده متن از عرض عنصری که متن را در آن نمایش می دهیم، بیشتر باشد، آنگاه بخشی از متن به هم چسبیده، در خارج از عنصر نمایش داده می شود که باعث خراب شدن نمایش متن می شود و حتی در برخی اوقات، بخشی از متن در خارج از کل صفحه قرار می گیرد و کاربر نمی تواند آن بخش از متن را بخواند.

برای برطرف کردن این مشکل و مجبور کردن متن به شکستن بخش به هم چسبیده آن به دو قسمت (که یک قسمت در خط جدید نمایش داده شود)، مشخصه word-wrap:break-word در CSS به کار می رود.

به مثال زیر توجه کنید :