overflow-wrap Property
ویژگی overflow-wrap
در CSS مشخص می کند که کلمات بلند در جایی که لازم است شکسته و به سطر بعد منتقل شوند یا نه.
نحوه نوشتار
overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere;
مقادیر
normal
سطرها تنها در نقاط معمول شکسته و به سطر بعد منتقل می شوند.
break-word
این امکان را می دهد تا کلمات شکسته شوند.
نکته: در مقایسه با ویژگی word-break
، ویژگی overflow-wrap
تنها در جایی کلمه را شکسته و به سطر بعد منتقل می کند که تمام کلمه نتواند در سطر خود قرار گیرد بدون اینکه از محدوده عنصر والد خود خارج شود.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
html
<section> <div class="normal"> ASDKHFGKJHCVOURWLEKJOIUXCVXCV elit. Repudiandae suscipit sit dignissimos dolore, nostrum quidem, </div> <div class="break-word"> ASDKHFGKJHCVOURWLEKJOIUXCVXCV elit. Repudiandae suscipit sit dignissimos dolore, nostrum quidem, </div> </section>
css
section { display: flex; justify-content: space-around; } div { background-color: #e7e7e7; padding: 15px; width: 220px; } .normal { overflow-wrap: normal; } .break-word { overflow-wrap: break-word; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.