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
 

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

 


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

 

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

 
مثال overflow-wrap
 

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

 


word-break: break-all;
}

 

 
مثال overflow-wrap
 

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

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

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

 

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

 

مثال

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

 

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


 

 

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

2 دیدگاه برای “overflow-wrap

  1. سلام
    لطفا در مورد شکسته شدن خط و شکسته شدن کلمه و فرق بین بین این دو هم یکم توضیح بدین.
    این که word break در مورد خط و overflow-wrap در مورد کلمه تصمیم میگیرند به چه معنیه دقیقا؟
    تشکر بابت سایت خوبتون.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *