overflow-wrap

با استفاده از ویژگی overflow-wrap می توان کلماتی که آنقدر طولانی هستند که از نگهدارنده خارج می شوند را به خط بعد شکست.

نام قبلی این ویژگی word-wrap می باشد و فعلا از آن به عنوان نام جایگزین استفاده می شود.

در حالت کلی اگر یک کلمه از اندازه نگهدارنده اش طولانی تر باشد از نگهدارنده سرریز می کند. با استفاده از این ویژگی می توان از این اتفاق جلوگیری کرد و آن قسمت از کلمه که در آن خط جا نمی گیرد را به خط بعد انتقال داد.

 

مقادیر ویژگی overflow-wrap

 

overflow-wrap: normal | break-word

 

 

normal

مقدار normal مقدار اولیه این ویژگی می باشد و باعث می شود تا خطوط بر اساس قوانین عادی عنصر شکسته شوند. و کلمات طولانی به خط بعد شکسته نمی شوند مگر اینکه از ویژگی word-break استفاده شود.

 

break-word

این مقدار باعث می شود تا کلمات طولانی به خط بعد شکسته شوند.

 

overflow-wrap: break-word;

 

شکسته شدن کلمه برای رفتن به خط جدید باعث کاهش خوانایی متن می شود. راهکار بهتر می تواند اضافه کردن یک خط تیره به آخر کلمه شکسته شده باشد که نشان می دهد کلمه در خط بعد ادامه خواهد داشت. برای بررسی بیشتر این موضوع ویژگی hyphens را مطالعه بفرمایید.

همچنین توجه داشته باشید این ویژگی زمانی کار می کند که white-space به خطوط متن یک عنصر اجازه شکسته شدن را بدهد.

 

تفاوت دو ویژگی word-break و overflow-wrap

حال اگر با ویژگی word-break آشنایی داشته باشید خواهید گفت تفاوت این دو ویژگی چیست؟

بصورت کوتاه می توان گفت word-break در مورد خط و overflow-wrap در مورد خود کلمه تصمیم می گیرد.

در مثال زیر هر دو ویژگی در حالت normal یا همان پیشفرض هستند. در نتیجه هیچ کلمه ای در آخر خط شکسته نشده است. همچنین کلمه ای که طولانی است از عنصر سرریز کرده است.

 

 

حال اگر مقادیر را بصورت زیر تنظیم کنیم:

 

overflow-wrap: break-word;
word-break: keep-all;
}

 

نتیجه زیر را خواهیم داشت:

 

 

و در نهایت اگر فقط برای ویژگی word-break مقدار break-all را تعیین کنیم همان کار overflow-wrap برای کلمات طولانی را نیز انجام خواهد داد و همچنین کلمات عادی نیز از وسط شکسته می شوند و در خط بعد ادامه خواهند داشت:

 

word-break: break-all;
}

 

 

 

در مورد کلمه بلندی که در مثال ها آمده است بیشتر بدانید. :)

 
در مثال زیر یک عبارت مشابه برای این دو ویژگی مورد بررسی قرار گرفته است. در مثال اول چون به عنصر اجازه داده شده است تا اگر در آخر خط کلمه ای به صورت کامل جا نمی شود شکسته شود این اتفاق افتاده است. اما در مثال دوم فقط به کلمه اجازه شکسته شدن داده شده است نه به خط.

ازآنجا که کلمه بزرگ در خط اول جا نشده است و خط اجازه شکسته شدن ندارد کلمه مجبور است در خط بعدی نمایش داده شود و چون به کلمه اجازه شکسته شدن داده شده است در آخر خط دوم کلمه می تواند به خط دوم بشکند و نتیجه زیر بوجود می آید:

 

 

مثال

دموی زیر را بررسی کنید:

 

See the Pen overflow-wrap by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

پشتیبانی مرورگر ها