CSS మరియు HTML ఉపయోగించి స్క్రోలింగ్ టెక్స్ట్ తో ఒక బాక్స్ సృష్టించు
ఒక బాక్స్ స్క్రోల్ బాక్స్ అనేది బాక్స్ యొక్క కొలతలు బాక్స్ పరిమాణం కంటే పెద్దగా ఉన్నప్పుడు స్క్రోల్ బార్లను కుడి వైపున మరియు దిగువకు జతచేస్తుంది. మరో మాటలో చెప్పాలంటే, మీరు 50 పదాలు సరిపోయే బాక్స్ కలిగి ఉంటే మరియు మీకు 200 పదాలు ఉన్న టెక్స్ట్ ఉంటే, ఒక HTML స్క్రోల్ బాక్స్ అదనపు 150 పదాలను చూసేలా స్క్రోల్ బార్లను అప్ చేస్తుంది. ప్రామాణిక HTML లో కేవలం పెట్టె వెలుపల ఉన్న అదనపు టెక్స్ట్ను వాయిదా వేస్తుంది.
HTML స్క్రోల్ చేయడం చాలా సులభం. మీరు స్క్రోల్ చేయాలనుకుంటున్న మూలకం యొక్క వెడల్పు మరియు ఎత్తును సెట్ చేయాలి మరియు ఆపై స్క్రోల్ చేయడం ఎలా కావాలో సెట్ చేయడానికి CSS ఓవర్ఫ్లో ఆస్తిని ఉపయోగించండి.
అదనపు టెక్స్ట్ తో ఏమి చేయాలి?
మీ లేఅవుట్పై ఖాళీలో సరిపోయేటప్పుడు మీకు ఎక్కువ టెక్స్ట్ ఉన్నప్పుడు, మీకు కొన్ని ఎంపికలుంటాయి:
- వచనం తిరగరాయంటే అది తక్కువగా ఉంటుంది మరియు సరిపోతుంది.
- టెక్స్ట్ హద్దులు దాటి ప్రవాహం అనుమతించు మరియు లేఅవుట్ మద్దతు అది మద్దతుగా ఉంటుంది ఆశిస్తున్నాము.
- అది ఓవర్ఫ్లో ఉన్న టెక్స్ట్ను కత్తిరించండి.
- స్క్రోల్ బార్లను (సాధారణంగా వచనం కోసం నిలువుగా) జోడించండి, అందువల్ల స్పేస్ స్క్రోల్లు అదనపు టెక్స్ట్ని చూపించడానికి.
ఉత్తమ ఎంపిక సాధారణంగా చివరి ఎంపిక: ఒక స్క్రోలింగ్ టెక్స్ట్ బాక్స్ సృష్టించండి. అప్పుడు అదనపు టెక్స్ట్ చదువుకోవచ్చు, కానీ మీ డిజైన్ రాజీపడదు.
దీనికి HTML మరియు CSS ఉంటుంది:
ఓవర్ఫ్లో: ఆటో; వారు టెక్స్ట్ యొక్క సరిహద్దులను పొంగి నుండి టెక్స్ట్ ఉంచడానికి అవసరమైన ఉంటే స్క్రోల్ బార్లు జోడించడానికి బ్రౌజర్ చెబుతుంది. కానీ ఈ పని కోసం, మీరు కూడా div న సెట్ వెడల్పు మరియు ఎత్తు శైలి లక్షణాలు అవసరం, ఓవర్ఫ్లో సరిహద్దులు ఉన్నాయి కాబట్టి.
మీరు ఓవర్ఫ్లో మార్చడం ద్వారా టెక్స్ట్ను కూడా కత్తిరించవచ్చు: ఆటో; ఓవర్ఫ్లో: దాగి; మీరు ఓవర్ఫ్లో ఆస్తి వదిలివేస్తే, టెక్స్ట్ div యొక్క సరిహద్దులు పైగా చంపివేయు ఉంటుంది.
మీరు స్క్రోల్ బార్లను కేవలం జస్ట్ టెక్స్ట్కు చేర్చగలవు
మీరు చిన్న స్థలంలో ప్రదర్శించదలిచిన పెద్ద చిత్రాన్ని కలిగి ఉంటే, దానితో మీరు స్క్రోల్ బార్లను దానితో పాటు టెక్స్ట్ లో చేర్చవచ్చు.
ఈ ఉదాహరణలో, 400x509 చిత్రం 300x300 పేరా లోపల ఉంది.
పట్టికలు స్క్రోల్ బార్లు నుండి ప్రయోజనం పొందవచ్చు
సమాచారం యొక్క లాంగ్ పట్టికలు చాలా త్వరగా చదవటానికి చాలా కష్టంగా ఉంటాయి, కానీ ఒక పరిమిత పరిమాణంలోని ఒక div లోపల వాటిని ఉంచడం ద్వారా మరియు ఓవర్ఫ్లో ఆస్తిని జోడించడం ద్వారా, మీరు మీ పేజీలో తీవ్ర స్థలాన్ని తీసుకోని డేటా యొక్క మాతో పట్టికలను రూపొందించవచ్చు .
సులభమయిన మార్గం చిత్రాలు మరియు వచనంతో సమానంగా ఉంటుంది, కేవలం పట్టిక చుట్టూ ఒక డివి, డివైడ్ యొక్క వెడల్పు మరియు ఎత్తును సెట్ చేయండి మరియు ఓవర్ఫ్లో ఆస్తిని జోడించండి:
| పేరు | ఫోన్ | ||||
|---|---|---|---|---|---|
| జెన్నిఫర్ | 502-5366 .... బ్రౌసర్ స్క్రోల్ బార్ల క్రోమ్ టేబుల్ అతివ్యాప్తి చెందిందని బ్రౌజర్ భావిస్తున్నందున మీరు చేసేటప్పుడు జరిగే ఒక విషయం ఒక సమాంతర స్క్రోల్ బార్గా కనిపిస్తుంది. పట్టిక మరియు ఇతరుల వెడల్పును మార్చకుండా దీనిని పరిష్కరించడానికి అనేక మార్గాలు ఉన్నాయి. కానీ నా ఇష్టమైన కేవలం CSS 3 ఆస్తి ఓవర్ఫ్లో- x తో సమాంతర స్క్రోలింగ్ ఆఫ్ చేయడం. కేవలం overflow-x: దాచు; div, మరియు ఆ సమాంతర స్క్రోల్ బార్ తొలగిస్తుంది. అదృశ్యమైపోయే కంటెంట్ ఉన్నందున, దీనిని పరీక్షించాలని నిర్ధారించుకోండి. ఫైర్ఫాక్స్ మద్దతు ఓవర్ఫ్లో కోసం TBODY టాగ్లు ఉపయోగించిఫైరుఫాక్సు బ్రౌజర్ యొక్క ఒక నిజంగా nice ఫీచర్ మీరు tbody మరియు thead లేదా tfoot వంటి అంతర్గత పట్టిక ట్యాగ్లను ఓవర్ఫ్లో ఆస్తి ఉపయోగించవచ్చు ఉంది. దీని అర్థం మీరు పట్టిక విషయాలపై స్క్రోల్ బార్లను సెట్ చేయవచ్చు, మరియు శీర్షిక కణాలు వాటిపై లంగరు ఉంటాయి. ఇది ఫైర్ఫాక్స్లో మాత్రమే పనిచేస్తుంది, ఇది చాలా చెడ్డది, కానీ మీ పాఠకులు ఫైర్ఫాక్స్ను ఉపయోగించినప్పుడు ఇది మంచి లక్షణం. నేను అర్థం ఏమిటో చూసేటప్పుడు ఫైర్ఫాక్స్లో ఈ ఉదాహరణను బ్రౌజ్ చేయండి.
|