مدیریت متنهای طولانی و شکستن خطوط: text-overflow، white-space، word-break و hyphens
تا اینجا با ظاهر و چیدمان کلی متن آشنا شدیم. اما یه دسته دیگه از چالشها هم وجود داره: چه اتفاقی باید بیفته وقتی متن بیشتر از فضای موجود باشه؟ آیا باید شکسته بشه، بریده بشه، یا با نقطهچین کوتاه نشون داده بشه؟ این درس دقیقاً به همین سؤالات جواب میده.
white-space: نحوه برخورد با فاصلهها و شکست خط
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}Property به اسم white-space مشخص میکنه مرورگر با فاصلههای خالی و شکست خط داخل متن، چطور رفتار کنه.
| مقدار | رفتار |
|---|---|
| normal | فاصلههای اضافه فشرده میشوند؛ متن بهطور خودکار در صورت نیاز به خط بعدی میرود (پیشفرض) |
| nowrap | متن هرگز بهطور خودکار به خط بعدی نمیرود؛ همه در یک خط باقی میماند |
| pre | فاصلهها و خطوط جدید دقیقاً همانطور که در HTML نوشته شدهاند حفظ میشوند (مثل تگ pre) |
| pre-wrap | فاصلهها حفظ میشوند، ولی در صورت نیاز شکست خط خودکار هم انجام میشود |
| pre-line | فاصلههای اضافه فشرده میشوند، ولی خطوط جدید موجود در متن حفظ میشوند |
مقدار پیشفرض، normal، دقیقاً همون رفتاریه که همیشه در HTML دیدیم: چند فاصله پشتسرهم به یک فاصله فشرده میشن، و خط جدید در کد HTML هیچ تأثیری روی نمایش نداره؛ مرورگر خودش بر اساس عرض موجود، تصمیم میگیره کجا خط رو بشکنه.
nowrap: جلوگیری از شکست خط
.tag {
white-space: nowrap;
}<span class="tag">برچسب بدون شکست خط</span>مقدار nowrap باعث میشه متن، حتی اگه از عرض عنصر بیشتر بشه، هرگز بهطور خودکار به خط بعدی نره؛ در عوض، از عرض جعبه بیرون میزنه (مگر اینکه با Propertyهای دیگهای مثل overflow، که در فصل ۴ دیدیم، این سرریز رو کنترل کنیم).
text-overflow: نمایش کوتاهشده متن سرریزشده
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Property به اسم text-overflow مشخص میکنه وقتی متنی بهخاطر overflow: hidden بریده میشه، چطور این برش به کاربر نشون داده بشه.
<div class="truncate" style="width: 200px;">
این یک متن بسیار طولانی است که در یک جعبه با عرض محدود جا نمیشود.
</div>مقدار ellipsis، بهجای بریدن ناگهانی و بیهشدار متن، سه نقطه (…) رو در انتهای متن نمایش میده تا کاربر بفهمه محتوای بیشتری وجود داره که نمایش داده نشده.
سه شرط ضروری برای کارکرد text-overflow: ellipsis
یکی از رایجترین اشتباهات، فراموش کردن اینه که text-overflow: ellipsis بهتنهایی هیچ اثری نداره؛ این Property فقط زمانی کار میکنه که هر سه شرط زیر همزمان برقرار باشن:
white-space: nowrap;(تا متن مجبور به ماندن در یک خط بشه)overflow: hidden;(تا بخش اضافه واقعاً بریده بشه)text-overflow: ellipsis;(تا این برش با سه نقطه نشون داده بشه)
بدون هر سه این Propertyها با هم، ellipsis هیچ نتیجهای نخواهد داشت.
word-break: شکستن کلمات طولانی
در فصل ۴ بهطور خلاصه با overflow-wrap آشنا شدیم که به شکستن کلمات طولانی و بدون فاصله کمک میکرد. word-break Propertyای مشابه ولی با رفتار کمی متفاوته.
.break-all {
word-break: break-all;
}<div style="width: 150px;" class="break-all">
ThisIsAVeryLongWordWithoutAnySpaces
</div>مقدار break-all اجازه میده مرورگر، هر کلمهای (حتی کلمات معمولی، نه فقط رشتههای خیلی طولانی) رو در هر نقطهای، بدون رعایت قوانین طبیعی شکست کلمه، بشکنه. این رفتار قویتر و تهاجمیتر از overflow-wrap: break-word است، که فقط زمانی کلمه رو میشکنه که واقعاً هیچ راه دیگهای برای جا دادن اون در عرض موجود نباشه.
تفاوت word-break: break-all و overflow-wrap: break-word
| Property | رفتار |
|---|---|
| overflow-wrap: break-word | فقط وقتی کلمه از عرض جعبه بیشتر است، آن را میشکند؛ در غیر اینصورت از قوانین طبیعی شکست خط پیروی میکند |
| word-break: break-all | حتی کلمات معمولی را هم میتواند در هر نقطهای بشکند تا از عرض موجود عبور نکند |
در اکثر پروژههای واقعی، overflow-wrap: break-word انتخاب امنتر و طبیعیتریه؛ چون فقط در شرایط ضروری (مثل یک لینک یا کد طولانی بدون فاصله) وارد عمل میشه، در حالی که word-break: break-all میتونه حتی متن معمولی رو هم بهطور غیرضروری و زشت بشکنه.
hyphens: شکست هجایی خودکار
p {
hyphens: auto;
}Property به اسم hyphens کنترل میکنه که آیا مرورگر مجازه، در محل شکست طبیعی خط، کلمات طولانی رو بهصورت هجایی (با یک خط تیره کوچک در انتهای خط) بشکنه یا نه؛ دقیقاً همون کاری که در چاپ کتاب و مجلات، برای جلوگیری از فضای خالی زیاد در انتهای خط، رایجه.
| مقدار | رفتار |
|---|---|
| none | هیچ شکست هجایی انجام نمیشود (پیشفرض) |
| manual | فقط در نقاطی که صراحتاً با یک کاراکتر خاص (Soft Hyphen) مشخص شدهاند، شکسته میشود |
| auto | مرورگر بهطور خودکار، بر اساس قوانین زبانی، محل مناسب شکست هجایی را تشخیص میدهد |
نکته مهم: برای کارکرد درست hyphens: auto، مرورگر باید بدونه متن به چه زبانیه؛ این اطلاعات از طریق ویژگی lang در HTML مشخص میشه (مثلاً lang="en" یا lang="fa"). بدون این ویژگی، مرورگر معمولاً نمیتونه قوانین شکست هجایی درستی رو برای اون زبان اعمال کنه.
یک مثال کامل و ترکیبی: کارت با عنوان کوتاهشده
.card-title {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-description {
overflow-wrap: break-word;
hyphens: auto;
}<h3 class="card-title" lang="fa">این یک عنوان بسیار طولانی برای یک کارت محصول است</h3>
<p class="card-description" lang="fa">
توضیحات کامل محصول که ممکن است شامل کلمات یا لینکهای طولانی باشد.
</p>در این مثال، عنوان کارت اگه طولانی باشه، با سه نقطه کوتاه نشون داده میشه (چون از هر سه شرط لازم استفاده کردیم)؛ ولی توضیحات کارت، بهجای بریده شدن، بهطور طبیعی میشکنه و حتی از شکست هجایی خودکار هم برای بهبود ظاهر بهره میبره.
نکات مهم
- text-overflow: ellipsis فقط در ترکیب با white-space: nowrap و overflow: hidden کار میکند.
- overflow-wrap: break-word محتاطتر است و فقط در صورت ضرورت کلمه را میشکند؛ word-break: break-all تهاجمیتر عمل میکند.
- hyphens: auto برای کارکرد درست، نیاز به مشخص بودن ویژگی lang روی عنصر یا سند دارد.
اشتباهات رایج
- استفاده از text-overflow: ellipsis بدون تعریف همزمان white-space: nowrap و overflow: hidden.
- استفاده از word-break: break-all در متنهای عادی، که باعث شکستن نامناسب و غیرضروری کلمات معمولی میشود.
- فراموش کردن ویژگی lang روی سند یا عنصر، که باعث میشود hyphens: auto عملکرد درستی نداشته باشد.
جمعبندی
white-space نحوه برخورد با فاصلهها و شکست خط را کنترل میکند، text-overflow (در ترکیب با white-space: nowrap و overflow: hidden) امکان نمایش سهنقطه بهجای بریدن ناگهانی متن را فراهم میکند، word-break و overflow-wrap کلمات طولانی یا بدون فاصله را میشکنند (با سطح تهاجم متفاوت)، و hyphens امکان شکست هجایی خودکار کلمات را، بر اساس زبان مشخصشده، فعال میکند.