فرادرسOverflow محتوا در CSS — آموزش CSS (بخش چهاردهم)
در این بخش به بررسی یکی دیگر از مفاهیم مهم، یعنی Overflow محتوا در CSS می‌پردازیم. سرریز یا Overflow محتوا زمانی رخ می‌دهد که مقدار محتوایی که باید درون یک باکس قرار گیرد، بیش از حجمی باشد که برای آن مناسب است. در این مقاله با این مفهوم و شیوه مدیریت آن آشنا می‌شویم. برای مطالعه بخش قبلی از این مجموعه آموزشی روی لینک زیر کلیک کنید:
Overflow چیست؟
می‌دانیم که همه چیز در CSS در واقع یک باکس (Box) است. همچنین می‌دانیم که با تعیین مقادیر مشخصه‌های width و height (یا معادل منطقی آن‌ها inline-size و block-size) می‌توانیم حدود اندازه این باکس‌ها را تعیین کنیم. Overflow زمانی رخ می‌دهد که مقدار محتوای یک باکس بیش از حد مناسب باشد و از این رو امکان قرارگیری مناسب آن در باکس وجود نداشته باشد. در این حالت CSS ابزارهای مختلفی برای مدیریت این سرریز در اختیار ما قرار می‌دهد. یادگیری مفهوم سرریز فواید زیادی دارد چون در زمان نوشتن CSS در موارد زیادی به خصوص زمانی که عمیق‌تر با لی‌آوت CSS سر و کار پیدا کنید، با آن مواجه خواهید شد.
CSS تلاش می‌کند داده‌ها از دست نروند
کار خود را با بررسی دو مثال آغاز می‌کنیم که شیوه رفتار پیش‌فرض CSS را در زمان مواجهه با پدیده سرریز نشان می‌دهد.
مثال نخست یک باکس است که در ابعاد بلوکی و با تعیین height محدود شده است. سپس محتوای بیشتری به آن اضافه می‌کنیم تا از فضای باکس تجاوز کند. این محتوا موجب سرریز باکس می‌شود و به شیوه نامرتبی در پاراگراف زیر باکس جای می‌گیرد.
1.box {
2 border: 1px solid #333333;
3 width: 200px;
4 height: 100px;
5}1.box {
2 border: 1px solid #333333;
3 width: 200px;
4 height: 100px;
5}مثال دوم یک کلمه در باکس است که در ابعاد «درون‌خطی» (inline) محدود شده است. باکس برای جای دادن این کلمه کوچک است و از این رو از باکس بیرون می‌زند.
1.word {
2 border: 1px solid #333333;
3 width: 100px;
4 font-size: 250%;
5}1<div class="word">Overflow</div>ممکن است کنجکاو باشید که چرا CSS به صورت پیش‌فرض رویکردی نسبتاً نامرتب پیش گرفته و موجب می‌شود که محتوا به روشی نامنظم سرریز شود. چرا محتوا را پنهان نمی‌کند و یا باکس را بزرگ‌تر نمی‌سازد؟
پاسخ این است که نهایت تلاش CSS این است که در حد امکان از پنهان ساختن محتوا خودداری کند، چون انجام این کار موجب از دست رفتن محتوا می‌شود که خود یک مشکل محسوب می‌شود. از نظر CSS این کار به معنی از بین رفتن بخشی از محتوا است. مشکل از بین رفتن محتوا این است که ممکن است متوجه نشوید که این اتفاق افتاده است. همچنین بازدیدکننده‌های صفحه ممکن است متوجه نشوند که بخشی از محتوا از دست رفته است.
اگر این یک دکمه تحویل فرم باشد که ناپدید شده است و هیچ کس نتواند آن فرم را تحویل دهد، مشکل بزرگی ایجاد می‌شود. بنابراین به جای آن CSS تلاش می‌کند تا محتوای سرریز شده به صورت نمایان دیده شود. در این حالت به احتمال بالا شما این نامرتبی را می‌بینید و یا در بدترین حالت بازدیدکننده وب‌سایت به شما اطلاع خواهد داد که بخشی از محتوا دارای همپوشانی است و باید اصلاح شود.
اگر یک باکس را با تعیین width یا height محدود کرده باشید، CSS فرض می‌گیرد که شما میدانید چه کاری انجام می‌دهید و این که احتمالا سرریز را مدیریت کرده‌اید. به طور کلی زمانی که قرار است محتوای متنی در یک باکس قرار گیرد، محدودسازی از نوع بُعد بلوکی دردسرساز می‌شود، زیرا ممکن است حجم متن بیشتر از مقداری باشد که در زمان طراحی سایت فرض می‌کردید و یا اندازه آن بزرگ‌تر باشد، مثلاً کاربر اندازه فونت مرورگر را افزایش دهد.
در بخش‌های بعدی به بررسی روش‌های مختلف کنترل اندازه‌بندی می‌پردازیم تا احتمال سرریز محتوا را کاهش دهیم. با این حال اگر به یک اندازه ثابت نیاز دارید، می‌توانید شیوه رفتار سرریز را کنترل کنید. در بخش بعدی آن را توضیح می‌دهیم.
مشخصه overflow
مشخصه overflow (+) شیوه کنترل سرریز عنصر را کنترل کرده و به مرورگر اعلام می‌کند که چگونه باید رفتار کند. مقدار پیش‌فرض سرریز مشخصه overflow به صورت visible است که به طور معمول در زمان وقوع سرریز محتوا مشاهده می‌کنیم.
اگر می‌خواهید در زمان وقوع سرریز، محتوا برش پیدا کند، می‌توانید از مقدار overflow: hidden روی باکس استفاده کید. بدین ترتیب سرریز پنهان می‌شود. این وضعیت می‌تواند موجب از دست رفتن محتوا شود و تنها زمانی باید مورد استفاده قرار گیرد که پنهان شدن محتوا موجب بروز مشکلی نمی‌شود.
1.box {
2 border: 1px solid #333333;
3 width: 200px;
4 height: 100px;
5 overflow: hidden;
6}1<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
2
3<p>This content is outside of the box.</p>همچنین ممکن است بخواهید در زمان سرریز شدن محتوا از نوارهای اسکرول استفاده کنید. اگر از مقدار overflow: scroll استفاده کنید، مرورگر نوارهای اسکرول را روی باکس سرریز شده نمایش می‌دهد. این کار حتی در صورتی که محتوای کافی برای سرریز وجود نداشته باشد، اتفاق خواهد افتاد. البته شاید این وضعیت مطلوب شما باشد، چون از نمایش یا پنهان شدن نوارهای اسکرول بسته به محتوا جلوگیری می‌کند.
1.box {
2 border: 1px solid #333333;
3 width: 200px;
4 height: 100px;
5 overflow: scroll;
6}1<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
2
3<p>This content is outside of the box.</p>در مثال فوق، تنها باید روی محور y اسکرول کنیم، با این حال نوارهای اسکرول در هر دو محور ایجاد می‌شوند. به جای آن می‌توان از مشخصه overflow-y استفاده کرد و با تعیین مقدار overflow-y: scroll امکان اسکرول را تنها روی محور y فراهم ساخت.
1.box {
2 border: 1px solid #333333;
3 width: 200px;
4 height: 100px;
5 overflow-y: scroll;
6}1<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
2
3<p>This content is outside of the box.</p>همچنین می‌توان با استفاده از مشخصه overflow-x صرفاً روی محور x اسکرول کرد. اما توجه داشته باشید که این روش مناسبی برای حل مشکل کلمات طولانی نیست. اگر می‌خواهید مشکل کلمه‌های طولانی را در یک باکس حل کنید، بهتر است از مشخصه‌های word-break یا overflow-wrap استفاده کنید. علاوه بر آن برخی متدها برای اندازه‌بندی آیتم‌ها در CSS وجود دارند که در بخش‌های بعدی این سری مقالات آموزش CSS معرفی خواهیم کرد. بدین ترتیب می‌توانید باکس‌هایی بسازید که تغییر در مقادیر محتوا را بهتر مدیریت می‌کنند.
1.word {
2 border: 5px solid #333333;
3 width: 100px;
4 font-size: 250%;
5 overflow-x: scroll;
6}1<div class="word">Overflow</div>در این حالت نیز همانند scroll یک نوار اسکرول در بعد اسکرول شونده ایجاد می‌شود که به میزان وجود محتوای کافی برای سرریز وابسته نیست.
نکته: توجه کنید که با تعیین مشخصه overflow می‌توانید دو مقدار ارسال کنید. اگر دو کلیدواژه تعیین شده باشند، ابتدا overflow-x و در وهله دوم overflow-y اعمال می‌شوند. در غیر این صورت overflow-x و overflow-y یک مقدار خواهند داشت. برای نمونه تعیین مقدار overflow: scroll hidden موجب می‌شود که overflow-x به صورت scroll و overflow-y به صورت hidden تنظیم شود.
اگر می‌خواهید نوارهای اسکرول تنها زمانی ظاهر شوند که حجم محتوای باکس سرریز می‌شود باید از overflow: auto استفاده کنید. در این حالت مرورگر تصمیم می‌گیرد که نوارهای اسکرول ظاهر شوند یا نه. مرورگرهای دسکتاپ معمولاً این کار را تنها زمانی انجام می‌دهند که حجم محتوا بیشتر از گنجایش باکس شده و سرریز رخ دهد. در مثال زیر در صورتی که حجم محتوا بیشتر از گنجایش باکس باشد، نوارهای اسکرول ظاهر می‌شوند و در غیر این صوت پنهان خواهند شد.
1.box {
2 border: 1px solid #333333;
3 width: 200px;
4 height: 100px;
5 overflow: auto;
6}1<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
2
3<p>This content is outside of the box.</p>Overflow موجب ایجاد ساختار قالب‌بندی بلوکی می‌شود
در CSS مفهومی تحت عنوان «ساختار قالب‌بندی بلوکی» (Block Formatting Context) یا به اختصار BFC وجود دارد. البته این مفهوم چیزی نیست که در این مرحله شما را دچار نگرانی بکند، اما بهتر است بدانید که وقتی از یک مقدار overflow مانند scroll یا auto استفاده می‌کنید، در واقع یک BFC ایجاد می‌کنید. نتیجه آن چنین است که محتوای باکسی که مقدار overflow-اش را تغییر داده‌اید، یک مینی لی‌آوت برای خودش می‌سازد. موارد خارج از کانتینر نمی‌توانند وارد کانتینر شوند و هیچ چیز نمی‌تواند از آن خارج و به لی‌آوت پیرامونی وارد شود. این وضعیت به منظور فراهم ساخت امکان اسکرول ایجاد می‌شود چون همه محتوای باکس باید در داخل آن قرار گیرد و با آیتم‌های دیگر روی صفحه همپوشانی نداشته باشد تا تجربه اسکرول کردن مناسبی ایجاد شود.
Overflow ناخواسته در طراحی وب
متدهای لی‌آوت مدرن به خوبی می‌توانند overflow را مدیریت کنند. آن‌ها طوری طراحی شده‌اند که بتوانند عدم قابلیت پیش‌بینی میزان محتوای ظاهرشده روی صفحه وب را مدیریت کنند. با این حال در گذشته توسعه‌دهندگان اغلب از موارد با ارتفاع ثابتی استفاده می کردند تا بخش‌های تحتانی باکس‌هایی که با هم رابطه داشتند با هم متناسب باشند. این وضیعت شکننده‌ای بود و در اپلیکیشن‌های قدیمی گهگاه با باکس‌هایی مواجه می‌شدیم که محتوای آن‌ها با محتوای بخش‌های دیگر همپوشانی یافته بود. اگر این وضعیت را مشاهده کردید بدانید که یک سرریز رخ داده است و می‌توان لی‌آوت را طوری بازسازی کرد که بر اندازه‌های ثابت باکس تکیه نداشته باشد.
زمانی که مشغول طراحی یک وب‌سایت هستید، همواره باید مشکل سرریز را در نظر داشته باشید. باید طراحی‌ها را با مقادیر کم و زیاد محتوا تست کنید، و همچنین اندازه متن فونت را افزایش دهید تا مطمئن شوید که CSS می‌تواند به روشی پایدار عمل کند. تغییر دادن مقدار overflow برای پنهان ساختن محتوا یا افزودن نوارهای اسکرول احتمالاً صرفاً در چند مورد خاص مورد نیاز خواهد بود. برای مثال ممکن است واقعاً لازم بشد از باکس اسکرول شونده استفاده شود.
سخن پایانی
در این مقاله با مفهوم سرریز (Overflow) در CSS آشنا شدیم. اینک شما میدانید که CSS تلاش می‌کند تا حد امکان محتوای سرریز شده را پنهان نسازد، چون موجب از دست رفتن داده‌ها می‌شود. همچنین دریافتید که می‌توانید موارد سرریز بالقوه را مدیریت کنید و می‌توانید کار خود را تست کنید تا اطمینان پیدا کنید که به صورت تصادفی موجب بروز یک سرریز تصادفی نمی‌شوید.
برای مطالعه بخش بعدی روی لینک زیر کلیک کنید:
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های طراحی سایت با HTML و CSS
- آموزش استایل لیست‌ها در CSS
- مجموعه آموزش‌های برنامه نویسی
- مفاهیم مقدماتی CSS — آموزش CSS (بخش اول)
- مدیریت جهت گیری های مختلف متن در CSS — آموزش CSS (بخش سیزدهم)
==
