سرخط خبرها

آموزش overflow در CSS

آموزش overflow در CSS

در این بخش از آموزش css خاصیت Overflow را  توضیح می دهیم.

گاهی اتفاق می افتد که دستورات وارده بر یک عنصر سر ریز کند با استفاه از ویژگی overflow می توان فهمید که بعد از سر ریز شدن چه اتفاقی می افتد.

*توجه داشته باشید که ویژگی overflow در همه ی مرورگرها پشتیبانی می شود.

مثال زیر کاربرد ویژگی overflow را در سی اس اس نشان می دهد.

div
{
width:150px;
height:150px;
overflow:scroll;
}

در مثال بالا ، در صورتی که ارتفاع و عرض محتوای داخل div بیشتر از مقدار طول و عرض تعیین شده شود ، div بصورت اسکرول نمایش داده میشود.

 

خصوصیات overflow :

مقادیری که میتوانید در این خصوصیت استفاده کنید :

visible : حالت پیش فرض است که بصورت معمولی نمایش داده می شود. این حالت، حالت پیش فرض می باشد یعنی اگر ما تعیین نکنیم، این حالت نمایش داده خواهد شد یعنی مازاد اندازه نشان داده خواهد شد.

hidden : در این حالت در صورتی که محتوا از طول و عرض عنصر تجاوز کند ، نمایش داده نمیشود.

scroll : که در بالا گفته شد، عنصر اسکرول عمودی و افقی خواهد خورد. در این حالت دو خط اسکرول عمودی و افقی در کنار تگ div  ظاهر خواهد شد و می توان به وسیله این اسکرول ها باقی متن را دید.

auto : در این حالت که بسیار پر استفاده است مانند اسکرول عمل میکند ، با این تفاوت اساسی که اسکرول بر اساس موقعیت افقی یا عمودی خواهد خورد و در صورتی که تجاوز نکند ، اسکرول نخواهد خورد.

 

 مثال :

فرض کنید که در داخل تگ div یک تگ p با مقداری زیادی متن قرار دهیم بدین صورت:

<!doctype html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>Document</title>

<link rel=”stylesheet” href=”/css.css”>

</head>

<body>

<div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, minus, earum rem soluta quae distinctio voluptates est deleniti aperiam necessitatibus iure numquam unde facilis repudiandae officiis! Odio, aspernatur, amet, ratione reprehenderit quia ad reiciendis nulla sit libero quibusdam voluptates autem labore ipsam repudiandae pariatur! Id, earum, ab, sed, iure fuga similique consequatur voluptatibus aliquid repellat blanditiis sit voluptatem sint perferendis illum magnam amet saepe tenetur incidunt harum voluptatum laborum ducimus distinctio facere eius quo rerum cupiditate eligendi temporibus libero totam esse unde consectetur ullam. Vel, architecto, modi, eum, qui dolore consequuntur laudantium officiis odio eaque sequi officia sed in rerum!</p>

</div>

</body>

</html>

 

 میبینیم که تگ p در داخل تگ div  جا نشده خوب این اتفاق ناخوشایند می باشد و باید برای آن تصمیمی گرفت ، در اینجا overflow گزینه مناسب است

-حالت visible

این حالت، حالت پیش فرض می باشد یعنی اگر ما تعیین نکنیم، این حالت نمایش داده خواهد شد یعنی مازاد اندازه نشان داده خواهد شد.

CSS

div{
width: 340px;
height: 200px;
margin: 50px auto;
background: #f5f5f5;
border: 1px solid #c5c55c;
overflow: visible;
}

– حالت hidden

با این حالت آنچه مازاد بر تگ div میباشد نشان داده نخواهد شد بدین صورت:

div{
width: 340px;
height: 200px;
margin: 50px auto;
background: #f5f5f5;
border: 1px solid #c5c55c;
overflow: hidden;
 

-حالت scroll

در این حالت دو خط اسکرول عمودی و افقی در کنار تگ div  ظاهر خواهد شد و می توان به وسیله این اسکرول ها باقی متن را دید.

div{
width: 340px;
height: 200px;
margin: 50px auto;
background: #f5f5f5;
border: 1px solid #c5c55c;
overflow: scroll;
}
 

-حالت auto

در این حالت در صورتی که در جهتی اندازه مازاد وجود داشته باشد در آن جهت اسکرول اضافه خواهد شد مثلا در بالا فقط در جهت عمودی خط اسکرول ظاهر خواهد شد.

div{
width: 340px;
height: 200px;
margin: 50px auto;
background: #f5f5f5;
border: 1px solid #c5c55c;
overflow: auto;
}
QR Code For: آموزش overflow در CSS

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.