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