ویژگی overflow-wrap در CSS

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 پشتیبانی می کنند.