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

استفاده

h1, h2, h3 {
  text-wrap: balance;
}

article p {
  text-wrap: pretty;
}
  • balance طول خطوط را تا حد ممکن برابر می‌کند؛ مناسب عنوان‌ها و متن‌های کوتاه (مرورگرها آن را برای چند خط محدود اعمال می‌کنند).
  • pretty برای پاراگراف‌های بلند است و بیشتر جلوی «یتیم‌شدن» کلمهٔ آخر را می‌گیرد.

نکته‌ها

این ویژگی یک بهبود تدریجی (progressive enhancement) است: در مرورگری که آن را نشناسد نادیده گرفته می‌شود و چیدمان معمولی باقی می‌ماند؛ پس خطری ندارد. روی متن‌های بسیار طولانی به‌کار نبرید، چون هزینهٔ محاسبهٔ بیشتری دارد. برای متن فارسی و راست‌به‌چپ هم قابل استفاده است.