وقتی محتوا از جعبه بزرگ‌تر می‌شه، باید تصمیم بگیریم بخش اضافه چطور دیده بشه. overflow:visible اجازه بیرون‌زدن می‌ده، hidden اضافه رو می‌پوشونه و auto در صورت نیاز راه پیمایش ایجاد می‌کنه. این ویژگی جایگزین اندازه‌گذاری مناسب نیست؛ اول اندازه ظرف رو آگاهانه تعیین می‌کنیم و بعد رفتار محتوای بیشتر رو مشخص می‌کنیم.
توی مثال، متن یک‌خطی در فضای کوتاه پنهان می‌شه تا تفاوت hidden دیده بشه. توی فعالیت برعکس، هدف حفظ امکان خواندن همه متن با پیمایشه. چند خط با br آماده شده تا ارتفاع محتوا حتماً از ظرف بیشتر باشه و رفتار مبهم نباشه. خطای رایج انتخاب hidden برای متن ضروریه؛ خروجی ظاهراً مرتب می‌شه اما خواننده به بخشی از جمله دسترسی نداره. در این تمرین overflow:auto رو روی خود ظرف محدود بنویس. رنگ و فونت رو لازم نیست تغییر بدی و نباید با حذف سطرها یا افزایش ارتفاع، مسئله اضافه‌محتوا رو از صورت تمرین پاک کنی.
✍️ مثال حل‌شده:
<div class="clip">این عنوان طولانی است</div>
<style>.clip { width:80px; white-space:nowrap; overflow:hidden; }</style>
حالا نوبت توئه: کادر .scroll-box باید width:220px، height:80px و overflow:auto داشته باشد. شش سطر آماده را با line-height:24px نگه دار تا محتوا بلندتر از کادر بماند و پیمایش ممکن شود. متن را حذف نکن و ارتفاع کادر را برای جاگرفتن همه سطرها افزایش نده.
فعالیت شما
کادر .scroll-box باید width:220px، height:80px و overflow:auto داشته باشد. شش سطر آماده را با line-height:24px نگه دار تا محتوا بلندتر از کادر بماند و پیمایش ممکن شود. متن را حذف نکن و ارتفاع کادر را برای جاگرفتن همه سطرها افزایش نده.