CSS text-wrap: زیبا

انتخاب بهینه سازی بسته بندی متن، برای زیبایی بیش از سرعت.

از Chrome 117 می‌توانید از ویژگی بسته‌بندی متن جدید استفاده کنید- text-wrap: pretty از CSS Text Level 4 .

p {
  text-wrap: pretty;
}
https://codepen.io/web-dot-dev/pen/yLGmzLJ

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

یک پاراگراف با یک بیوه در ابتدا و یک یتیم در پایان نشان داده شده است، در مقایسه با همان پاراگراف بدون یتیم یا بیوه.
منبع تصویر از فونت های Google—Widows & Orphans

از Chrome 117، می‌توان با یک خط CSS از یتیمان جلوگیری کرد: text-wrap: pretty .

این ویژگی کمی بیشتر از اطمینان از اینکه پاراگراف‌ها با یک کلمه ختم نمی‌شوند، انجام می‌دهد، همچنین اگر خطوط خط تیره متوالی در انتهای پاراگراف ظاهر می‌شوند یا خطوط قبلی را برای ایجاد فضا تنظیم می‌کند، خط فاصله را تنظیم می‌کند. همچنین به طور مناسب برای توجیه متن تنظیم می شود. text-wrap: pretty برای بسته بندی خط و شکستن متن به طور کلی بهتر است، که در حال حاضر روی کودکان بی سرپرست متمرکز شده است. در آینده، text-wrap: pretty ممکن است بهبودهای بیشتری ارائه دهد.