Home-theater-designers
వెబ్ డిజైన్ సమయంలో సుదీర్ఘ గ్రంథాలు అనియంత్రితంగా కనిపిస్తాయి. కానీ అవి కూడా అనివార్యం కావచ్చు, మరియు కొన్నిసార్లు అవి సరిహద్దులు దాటుతాయి. ఇది యూజర్ ఫ్రెండ్లీగా లేని అనవసరమైన ఓవర్‌ఫ్లోతో వదులుగా ఉండే డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM) ని సృష్టించవచ్చు.
అయితే ఇక్కడ శుభవార్త ఉంది: మీరు CSS ఉపయోగించి కొత్త లైన్‌లో వాటిని మూసివేయడం ద్వారా సుదీర్ఘ గ్రంథాలను పరిష్కరించవచ్చు. CSS తో పొడవైన, విరగని వచనాలను ఎలా చుట్టాలో ఇక్కడ మేము మీకు చూపుతాము.
CSS టెక్స్ట్ ర్యాప్ ఎలా పనిచేస్తుంది
CSS ఇన్‌బిల్ట్ ఉపయోగించి సుదీర్ఘ పదాలను విస్తరిస్తుంది పదం చుట్టు లేదా ఓవర్ఫ్లో-ర్యాప్ ఆస్తి.
మీ ఫోన్ నంబర్‌ను ఎలా కనుగొనాలి
అయితే, నియంత్రించనప్పుడు, బ్రౌజర్‌లు డిఫాల్ట్‌గా అలాంటి సుదీర్ఘ వచనాలను నిర్వహిస్తాయి. వారు సూచనలను స్వీకరించే వరకు వారు దీర్ఘ పదాలను మూసివేయరు.
సంబంధిత: DOM గురించి మీరు తెలుసుకోవలసినది
ముందు పేర్కొన్న రెండు ప్రధాన CSS లక్షణాలు ఒకే విధంగా పనిచేస్తాయి మరియు మీరు వాటిని పరస్పరం మార్చుకోవచ్చు. అయితే, వారు నాలుగు విలువలు లేదా వాక్యనిర్మాణాలను అంగీకరిస్తారు:
- బ్రేక్-పదం : ఇది నిజమైన CSS సింటాక్స్, ఇది బ్రౌజర్‌కి సుదీర్ఘ వచనాన్ని కొత్త పంక్తికి చుట్టమని చెబుతుంది.
- సాధారణ : ఇది ప్రతి పదాన్ని DOM లో వేరు చేసే సాధారణ పాయింట్ల వద్ద విచ్ఛిన్నం చేస్తుంది. ఇది పొడవైన తీగలపై ప్రభావం చూపదు.
- ప్రారంభ : ఇది స్ట్రింగ్‌లను నిర్వహించడానికి డిఫాల్ట్ బ్రౌజర్ మార్గం. వంటిది సాధారణ వాక్యనిర్మాణం, ఇది దీర్ఘ పదాలను విచ్ఛిన్నం చేయదు.
- వారసత్వంగా : ఇది తన తల్లిదండ్రుల ఆస్తిని వారసత్వంగా పొందడానికి పిల్లల మూలకాన్ని చెబుతుంది. కానీ మీరు దరఖాస్తు చేస్తే తప్ప, అది ఇంకా సుదీర్ఘ గ్రంథాలతో పనిచేయదు బ్రేక్-పదం మాతృ అంశానికి.
CSS వర్డ్ ర్యాప్ ఉపయోగించి పొడవైన పదాలను ఎలా మూసివేయాలి
CSS తో కొత్త పంక్తికి పదాలను చుట్టడం సులభం మరియు పని చేయడానికి గజిబిజిగా ఉండే CSS సర్దుబాటు అవసరం లేదు.
ఉదాహరణకు, పొడవైనది h2 దిగువ నమూనా చిత్రంలో టెక్స్ట్ కంటైనర్ లోపల టెక్స్ట్ సరిహద్దు రేఖను దాటింది:
దీనిని ఉపయోగించి తదుపరి లైన్‌లోకి ఎలా మూసివేయవచ్చో చూద్దాం పదం చుట్టు CSS ఆస్తి:
HTML :
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above
CSS :
.wrap-it{
word-wrap: break-word;
}
సుదీర్ఘంగా చుట్టబడిన తరువాత h2 నమూనా చిత్రంలో టెక్స్ట్, ఇక్కడ అవుట్‌పుట్ ఉంది:
అంతే! CSS ఉపయోగించి మీ DOM లో కొత్త లైన్‌లోకి పదాలను ఎలా చుట్టాలో ఇప్పుడు మీకు తెలుసు.
కంప్యూటర్ కొనడానికి ఉత్తమ సమయం
సంబంధిత: CSS సెలెక్టర్లను ఉపయోగించి వెబ్ పేజీ యొక్క భాగాన్ని ఎలా టార్గెట్ చేయాలి
అయితే, ముందు చెప్పినట్లుగా, పదం చుట్టు మరియు ఓవర్ఫ్లో-ర్యాప్ అదే విధంగా పని చేయండి మరియు ఇలాంటి లక్షణాలను అంగీకరించండి.
ఉపయోగించడానికి ఓవర్ఫ్లో-ర్యాప్ బదులుగా, భర్తీ చేయండి పదం చుట్టు దానితో.
వెబ్ పేజీలో పదాలను మూసివేయడం ముఖ్యం
మీ వెబ్‌పేజీకి మరిన్ని సౌందర్యాలను జోడించడంతో పాటు, వచనాలను చుట్టడం DOM ని కాంపాక్ట్ చేస్తుంది. మీ కంటెంట్ విభాగంలోకి వెళ్లడాన్ని మీరు నియంత్రించినప్పటికీ, వినియోగదారులు మీ టెక్స్ట్ కంటైనర్ లేదా మీ మొత్తం DOM కి సరిపోని లింక్‌లు లేదా ఇతర పదాలను పోస్ట్ చేయవచ్చు.
అందువల్ల, DOM చెక్కుచెదరకుండా ఉంచడానికి అటువంటి విభాగానికి టెక్స్ట్ ర్యాప్‌ను వర్తింపచేయడం అవసరం.
ల్యాండ్‌లైన్‌లో అవాంఛిత కాల్‌లను ఎలా బ్లాక్ చేయాలిషేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ రెస్పాన్సివ్ వెబ్‌సైట్‌లను సృష్టించడానికి HTML మరియు CSS లో మీడియా ప్రశ్నలను ఎలా ఉపయోగించాలి
మొబైల్ పరికరాల్లో మీ వెబ్‌సైట్ అద్భుతంగా కనిపించాలనుకుంటున్నారా? CSS లో మీడియా ప్రశ్నలను ఎలా ఉపయోగించాలో తెలుసుకోవడానికి ఇది సమయం.
తదుపరి చదవండి సంబంధిత అంశాలు- ప్రోగ్రామింగ్
- CSS
- డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్
ఇడోవు ఏదైనా స్మార్ట్ టెక్ మరియు ఉత్పాదకతపై మక్కువ చూపుతుంది. తన ఖాళీ సమయంలో, అతను కోడింగ్‌తో ఆడుతాడు మరియు అతను విసుగు చెందినప్పుడు చెస్‌బోర్డ్‌కు మారతాడు, కానీ అతను ఒక్కోసారి రొటీన్ నుండి దూరంగా ఉండడాన్ని కూడా ఇష్టపడతాడు. ఆధునిక సాంకేతిక పరిజ్ఞానం చుట్టూ ప్రజలకు మార్గం చూపించాలనే అతని అభిరుచి అతన్ని మరింత రాయడానికి ప్రేరేపిస్తుంది.
ఇడోవు ఒమిసోలా నుండి మరిన్నిమా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి
టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!
సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి