Overflow: Visible, Hidden, Scroll and Auto
Overflow అంటే ఏమిటి?
ఒక element కి ఇచ్చిన width లేదా height కంటే దాని లోపల content ఎక్కువగా ఉన్నప్పుడు, బయటికి వచ్చే content ను browser ఎలా చూపించాలో నిర్ణయించడానికి overflow property ఉపయోగిస్తాము.
overflow విలువలు
- visible: ఇది default value. Content box బయటికి వచ్చినా కనిపిస్తుంది.
- hidden: Box పరిమితి బయటికి వచ్చే content కనిపించదు. అదనపు భాగం clip అవుతుంది.
- scroll: Scrollbar ఎప్పుడూ కనిపిస్తుంది. దాని ద్వారా మొత్తం content చూడవచ్చు.
- auto: అవసరం ఉన్నప్పుడు మాత్రమే scrollbar కనిపిస్తుంది.
సాధారణ syntax: overflow: value;
Overflow పనిచేయడానికి సాధారణంగా element కి నిర్ణయించిన width లేదా height ఉండాలి. Content తక్కువగా ఉంటే hidden, scroll, auto మధ్య తేడా స్పష్టంగా కనిపించకపోవచ్చు. Overflow ను ఒకే దిశకు నియంత్రించడానికి overflow-x మరియు overflow-y కూడా ఉపయోగించవచ్చు.
రన్ చేసి చూడండి
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Overflow</title>
<style>
.box {
width: 220px;
height: 70px;
padding: 10px;
margin-bottom: 12px;
border: 2px solid #2457a6;
box-sizing: border-box;
}
.visible-box { overflow: visible; }
.hidden-box { overflow: hidden; }
.scroll-box { overflow: scroll; }
.auto-box { overflow: auto; }
</style>
</head>
<body>
<div class="box visible-box">Visible: This text is longer than the box height, so it can appear outside the box.</div>
<div class="box hidden-box">Hidden: This text is longer than the box height, so the extra part is clipped.</div>
<div class="box scroll-box">Scroll: Use the scrollbars to read all of this content inside the box.</div>
<div class="box auto-box">Auto: A scrollbar appears only when the content needs more space.</div>
</body>
</html>ముఖ్యమైన విషయం
overflow: hidden content ను తొలగించదు; అది కనిపించకుండా clip చేస్తుంది. వినియోగదారుడు దాచిన content ను సాధారణంగా చూడలేడు. ముఖ్యమైన text ను దాచే ముందు జాగ్రత్తగా ఆలోచించాలి.
Simple Explanation
ఒక చిన్న box లో పెద్ద paragraph పెట్టినప్పుడు content box కంటే ఎక్కువ స్థలం తీసుకోవచ్చు. అప్పుడు overflow browser కి ఆ అదనపు content ను ఎలా handle చేయాలో చెబుతుంది.
visibleలో content box బయట కూడా కనిపిస్తుంది.hiddenలో box బయట భాగం కత్తిరించబడుతుంది.scrollలో scrollbars ఉంటాయి, కాబట్టి అదనపు content చదవవచ్చు.autoలో అవసరమైనప్పుడు మాత్రమే scrollbars వస్తాయి.
ఉదాహరణకు, fixed-height notification box లో text ఎక్కువగా ఉంటే auto ఉపయోగిస్తే layout కూడా కాపాడబడుతుంది, content కూడా చదవవచ్చు.
Real-Life Example
ఒక mobile app లో notification panel కి పరిమితమైన height ఉందని అనుకుందాం. Notifications ఎక్కువైతే అన్నీ page బయటకు రావడం layout ను పాడుచేయవచ్చు. అక్కడ overflow: auto ఉపయోగిస్తే panel తన పరిమితిలోనే ఉంటుంది మరియు user scroll చేసి అన్ని notifications చదవగలడు.
Code Examples
నాలుగు overflow విలువలను పోల్చడం
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Overflow</title>
<style>
.box {
width: 220px;
height: 70px;
padding: 10px;
margin-bottom: 12px;
border: 2px solid #2457a6;
box-sizing: border-box;
}
.visible-box { overflow: visible; }
.hidden-box { overflow: hidden; }
.scroll-box { overflow: scroll; }
.auto-box { overflow: auto; }
</style>
</head>
<body>
<div class="box visible-box">Visible: This text is longer than the box height, so it can appear outside the box.</div>
<div class="box hidden-box">Hidden: This text is longer than the box height, so the extra part is clipped.</div>
<div class="box scroll-box">Scroll: Use the scrollbars to read all of this content inside the box.</div>
<div class="box auto-box">Auto: A scrollbar appears only when the content needs more space.</div>
</body>
</html>ప్రతి div కి ఒకే width మరియు height ఉన్నాయి. Content box కంటే ఎక్కువగా ఉండేలా text పెట్టాము. నాలుగు class selectors ద్వారా నాలుగు overflow విలువలను వేర్వేరుగా పరీక్షిస్తున్నాము.
visible content ను బయట చూపిస్తుంది. hidden బయట భాగాన్ని clip చేస్తుంది. scroll scrollbars ను చూపిస్తుంది. auto అవసరం ఉన్నప్పుడు scrollbar ఇస్తుంది.
నాలుగు చిన్న boxes కనిపిస్తాయి. Visible box లో అదనపు text box బయట కనిపిస్తుంది. Hidden box లో అదనపు text కత్తిరించబడుతుంది. Scroll box లో scrollbars కనిపిస్తాయి. Auto box లో content ఎక్కువగా ఉన్నందున scrollbar కనిపించవచ్చు.
Line-by-Line Explanation
ఈ selector అన్ని box elements ను ఎంచుకుంటుంది. అందువల్ల common sizing మరియు border styles అన్ని boxes కి వర్తిస్తాయి.
ప్రతి box వెడల్పును 220 pixels గా నిర్ణయిస్తుంది. Content కి లభించే horizontal space పరిమితం అవుతుంది.
ప్రతి box ఎత్తును 70 pixels గా నిర్ణయిస్తుంది. Text ఎక్కువగా ఉంటే overflow ను గమనించవచ్చు.
Width మరియు height లో padding, border కూడా లెక్కించబడతాయి. ఇది Previous Lesson లో నేర్చుకున్న box sizing భావన.
Box లో సరిపోని content బయటికి వచ్చినా browser దాన్ని కనిపించేలా ఉంచుతుంది. ఇది overflow యొక్క default ప్రవర్తన.
Box పరిమితి బయటికి వచ్చే content ను browser clip చేస్తుంది. ఆ అదనపు భాగం కనిపించదు.
Content ను box లో scroll చేసి చదవడానికి scrollbars ఇస్తుంది. Content తక్కువగా ఉన్నా scrollbar కనిపించవచ్చు.
Content box లో సరిపోకపోతే మాత్రమే అవసరమైన scrollbar ను browser చూపిస్తుంది. సాధారణంగా ఇది practical choice.
ఈ HTML element కు box మరియు visible-box classes ఉన్నాయి. అందువల్ల common box styles తో పాటు overflow: visible కూడా వర్తిస్తుంది.
ఈ element లో text ఎక్కువగా ఉంది. hidden-box class కారణంగా box బయటకు వెళ్లే text కనిపించదు.
ఈ element యొక్క అదనపు content ను scrollbars ద్వారా చూడవచ్చు. scroll-box class overflow: scroll ను వర్తింపజేస్తుంది.
Content కి అదనపు స్థలం అవసరమైతే మాత్రమే scrollbar కనిపిస్తుంది. auto-box class overflow: auto ను ఉపయోగిస్తుంది.
Try It
Try this CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Try CSS Overflow</title>
<style>
.panel {
width: 240px;
height: 80px;
padding: 10px;
border: 2px solid #333333;
overflow: auto;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="panel">This is extra content inside a small panel. Change the overflow value and observe what happens.</div>
</body>
</html>Practice
Practice: పై code లో ఉన్న notice box content బయటికి రాకుండా, అవసరమైనప్పుడు scrollbar కనిపించేలా CSS ను మార్చండి.
Hint: `.notice` selector లో `overflow: visible;` ను `overflow: auto;` గా మార్చండి.
Common Mistakes
overflow property కి over-flow అని రాయడం.సరైన property name
overflow. Hyphen ఉపయోగించకండి.
width లేదా height లేకుండానే overflow తేడాను పరీక్షించడం.Overflow స్పష్టంగా కనిపించడానికి element కి తగిన width లేదా height ఇవ్వండి.
overflow: hidden; ఉపయోగించి content తొలగిపోయిందని అనుకోవడం.Content తొలగిపోదు; box పరిమితి బయట భాగం మాత్రమే కనిపించకుండా clip అవుతుంది.
overflow: scroll; ఉపయోగించడం వల్ల అవసరం లేకపోయినా scrollbars చూపించడం.అవసరమైనప్పుడు మాత్రమే scrollbar కావాలంటే
overflow: auto; ఉపయోగించండి.
ప్రతి declaration చివర
; పెట్టండి. ఉదాహరణ: overflow: auto;
Interview Questions
CSS లో overflow property ఎందుకు ఉపయోగిస్తారు?
Answer: Element యొక్క నిర్ణయించిన width లేదా height లో content సరిపోనప్పుడు, అదనపు content ను browser ఎలా చూపించాలో నిర్ణయించడానికి overflow property ఉపయోగిస్తారు.
overflow: hidden మరియు overflow: auto మధ్య తేడా ఏమిటి?
Answer: hidden లో box బయట content కనిపించదు. auto లో content ఎక్కువగా ఉన్నప్పుడు scrollbar కనిపిస్తుంది, కాబట్టి user అదనపు content చదవగలడు.
overflow: visible యొక్క default ప్రవర్తన ఏమిటి?
Answer: Content box లో సరిపోకపోయినా అది box బయటికి వచ్చి కనిపిస్తుంది. సాధారణంగా overflow యొక్క default value visible.
overflow: scroll ఎప్పుడు ఉపయోగించవచ్చు?
Answer: Box లోని మొత్తం content ను scroll చేసి చదవాల్సినప్పుడు ఉపయోగించవచ్చు. ఇది సాధారణంగా scrollbars ను ఎల్లప్పుడూ చూపిస్తుంది.
Exam Questions
Content box బయటికి వచ్చినా కనిపించేలా చేసే overflow value ఏది?
Answer:
visible
అదనపు content ను దాచే overflow value ఏది?
Answer:
hidden
అవసరమైనప్పుడు మాత్రమే scrollbar చూపించే overflow value ఏది?
Answer:
auto
Overflow property రాయడానికి సరైన syntax ఏమిటి?
Answer:
overflow: value;
Quick Revision
- Overflow అనేది box లో content సరిపోనప్పుడు దాన్ని ఎలా చూపించాలో నిర్ణయిస్తుంది.
- visible లో అదనపు content బయట కనిపిస్తుంది.
- hidden లో బయటికి వచ్చిన content clip అవుతుంది.
- scroll లో scrollbars కనిపిస్తాయి.
- auto లో అవసరమైనప్పుడు మాత్రమే scrollbars కనిపిస్తాయి.
- Overflow గమనించడానికి సాధారణంగా element కి width లేదా height పరిమితి ఉండాలి.