cssblog.ir logo
P

word-break

شکستن کلمات در مواقعی که فضا کم است

با استفاده از این مشخصه می‌توان به متن‌هایی که در حالت عادی فاقد کارکترهای قابل شکستن (مانند فاصله یا خط تیره) هستند (مانند یک URL طولانی) امکان شکستن داد

شکستن خط ها که به آن text wrapping گفته می شود، امری عادی و متداول است که بدلیل اتمام فضای خطوط انجام می شود. معمولا بصورت پیشفرض این شکستن ها در جاهایی که فاصله (space) یا کارکتر hyphen (- خط تیره) وجود داشته باشند رخ می دهد. با استفاده از مشخصه word-break می توان بجای کلمات، حروف را شکست و در خطوط بعدی قرار داد که اینکار را می توان با دادن مقدار break-all به این مشخصه انجام داد.

مثال کاربردی

حتما این سوال برای شما هم پیش آمده که این مشخصه در چه مواقعی می تواند مفید واقع شود. کاربرد این مشخصه گاها این است که در مواقعی که محتوا در قسمتی توسط کاربران تعیین می شود و به نحوه نگارش محتوا اطمینان نداریم می توانیم از این مشخصه استفاده کنیم تا مطمئن شویم که هیچوقت محتوا بدلیل نبودن فاصله یا خط تیره از فضای خود بیرون نمی زند.

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

اگر در مثال زیر از این مشخصه و مقدار break-all استفاده نشده بود، URL بصورت کامل دیده نمی‌شد و از صفحه بیرون می‌زد:

 

استفاده در کنار hyphen

مشخصهhyphen باعث می شود تا مانند متون استاندارد انگلیسی در هنگامی که شکستن خط رخ می‌دهد یک کارکتر خط تیره در آن موقعیت نمایش داده شود. استفاده از مشخصه hyphen و word-break در کنار یکدیگر نیز معمولا استفاده می‌شوند که گاهی می‌تواند مفید واقع شود. برای پشتیبانی بیشتر مرورگرها بهتر است که از vendor prefix‌ها نیز استفاده شود. مانند:

div {
    -ms-word-break: break-all;
    word-break: break-all;
    /* Non standard for WebKit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

کد CSS فوق به نقل از css-tricks نوشته شده است

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند