وقتی داریم درباره طراحی و تنظیمات صفحات وب صحبت می‌کنیم، یکی از مسائل جزئی و ظریفی که به ندرت توجه می‌شود، مشکل orphan در متن‌ها است. Orphan به اشکالی اطلاق می‌شود که در آن، یک کلمه یا تعداد کمی از کلمات در یک صفحه جدید شروع یا خاتمه می‌یابند، در حالی‌که بقیه متن در صفحه قبلی یا بعدی قرار دارد. این مسأله می‌تواند در خوانایی و زیبایی نوشته‌ها تأثیر منفی بگذارد و باعث ناهماهنگی در نمایش متن‌ها شود.
در CSS، برای رفع چنین مشکلاتی و بهبود نمایش متن، می‌توانیم از ویژگی‌هایی مانند "widows" و "orphans" استفاده کنیم. این ویژگی‌ها به تنظیم تعداد خطوطی که در یک صفحه بتوانند تنها بمانند یا به صفحه بعد برده شوند، کمک می‌کنند.
هرچند تنظیمات دقیق و گسترده‌تری توسط ابزارهای پیشرفته‌تر مانند JavaScript و کتابخانه‌های CSS ممکن است، اما برای شروع، آشنایی با ویژگی‌های پایه‌ای خود CSS می‌تواند بسیار موثر باشد.
در ادامه، به یک نمونه کد ساده می‌پردازیم که نشان‌دهنده چگونگی استفاده از ویژگی‌های "widows" و "orphans" در CSS است.
p {
widows: 2;
orphans: 2;
}
کد بالا چه کاری انجام می‌دهد؟ بیا با هم نگاهی به این کد بندازیم:
p: این بخش تعیین می‌کند که تنظیمات ما برای تمام پاراگراف‌های HTML اعمال شود.widows: 2;: این خط مشخص می‌کند که دست‌کم ۲ خط از متن در صفحه جدید باقی بمانند، تا از بروز "widows" خودداری شود.orphans: 2;: تعیین می‌کند که دست‌کم ۲ خط از متن در انتهای صفحه قدیم بمانند تا "orphans" نداشته باشیم.