پلاگین بسته بندی (Wrap Plug) چیست؟

Wrap Plug: راهکاری ساده برای مدیریت متن در طراحی وب

سلام دوستان. حتما براتون پیش اومده که دارید یک وب‌سایت طراحی می‌کنید و یک متن خیلی طولانی توی یک قسمت خاص (مثلا یک کادر) قرار می‌دید. خب، گاهی اوقات این متن از کادر بیرون میزنه و ظاهر سایت رو خراب می‌کنه. اینجاست که Wrap Plug به کمک ما میاد!

به زبان ساده، Wrap Plug یه جورایی مثل یک چسب نامرئیه که متن رو مجبور می‌کنه داخل همون کادر بمونه و به خط بعدی بره، به جای اینکه از کادر بیرون بزنه. در واقع، Wrap Plug یه ویژگی خیلی مفید در زبان‌های برنامه‌نویسی مثل CSS هست که به ما کمک می‌کنه ظاهر وب‌سایت‌مون رو مرتب و منظم نگه داریم.

تصور کنید یک جدول داریم که میخوایم توضیحاتی درباره یک محصول رو داخل یکی از سلول‌هاش بنویسیم. اگه این توضیحات خیلی طولانی باشه، ممکنه از عرض سلول بزنه بیرون. حالا ببینیم چطور می‌تونیم با Wrap Plug این مشکل رو حل کنیم.

نام محصول	توضیحات
گوشی موبایل مدل X	متن خیلی طولانی که ممکنه از سلول بیرون بزنه. اینجا باید از Wrap Plug استفاده کنیم تا متن به خطوط بعدی بره و داخل سلول بمونه. اینجوری ظاهر جدول بهتر میشه و کاربر راحت‌تر میتونه اطلاعات رو بخونه. فرض کنید یک سری مشخصات فنی خیلی زیاد برای این گوشی داشته باشیم...
لپ‌تاپ مدل Y	توضیحات مربوط به لپ‌تاپ

خب، چطور از Wrap Plug استفاده کنیم؟ توی CSS، ما از خاصیت `word-wrap` یا `overflow-wrap` استفاده می‌کنیم. این دوتا خاصیت تقریبا یک کار رو انجام میدن. بیاین یک مثال ساده ببینیم:

.my-element {
  word-wrap: break-word;
  /* or */
  overflow-wrap: break-word;
}

توی این مثال، ما یک کلاس به اسم `.my-element` داریم. این کلاس رو به هر عنصری که میخوایم متن داخلش به صورت اتوماتیک به خط بعدی بره اضافه می‌کنیم. مقدار `break-word` به این معنیه که اگه یک کلمه خیلی طولانی باشه و نتونه داخل یک خط جا بشه، مرورگر میتونه اون کلمه رو بشکنه و به خط بعدی ببره.

یه مثال دیگه: فرض کنید میخوایم یک پیام چت طولانی رو داخل یک کادر نشون بدیم:

<div class="chat-message">
  یک متن خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی خیلی طولانی.
</div>

<style>
.chat-message {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  word-wrap: break-word;
}
</style>

توی این مثال، ما یک کادر با عرض 200 پیکسل داریم. اگه خاصیت `word-wrap: break-word` رو اضافه نکنیم، متن از کادر بیرون میزنه. اما با اضافه کردن این خاصیت، متن به خطوط بعدی میره و داخل کادر باقی میمونه.

حالا یه نکته‌ی مهم دیگه! بعضی وقتا ممکنه بخوایم فقط کلمه‌های خیلی طولانی رو بشکنیم، نه همه کلمه‌ها رو. برای این کار می‌تونیم از خاصیت `word-break` استفاده کنیم. مقدار `break-all` باعث میشه که هر کلمه‌ای که از کادر بیرون بزنه، شکسته بشه. مقدار `keep-all` جلوی شکسته شدن کلمه‌ها رو می‌گیره (مخصوصا برای زبان‌هایی مثل ژاپنی).

یه اشتباه پرتکرار (و یه املا غلط