ఈ కథనం టెయిల్‌విండ్‌లో వచనాన్ని బిగించే విధానాన్ని అందిస్తుంది.
నిర్దిష్ట సంఖ్యలో లైన్లకు వచనాన్ని బిగించడం ఎలా?
టైల్‌విండ్‌లోని లైన్-క్లాంపింగ్ క్లాస్ బ్లాక్‌లోని టెక్స్ట్ కంటెంట్‌ను నిర్దిష్ట సంఖ్యలో లైన్లకు పరిమితం చేస్తుంది. ఇలా చేయడం ద్వారా, టెక్స్ట్ బ్లాక్ క్లాస్‌లో పేర్కొన్న పంక్తుల సంఖ్య తర్వాత వచనాన్ని దాచిపెడుతుంది. కొంత వచన సమాచారం ఉందని వినియోగదారుకు చూపించడానికి లేదా వెబ్‌పేజీలో సంతృప్తతను నివారించడానికి అన్ని అనవసరమైన వచనాన్ని దాచడానికి ఇది వెబ్‌పేజీలో ఉపయోగించవచ్చు.
వాక్యనిర్మాణం
క్రింద ఇవ్వబడిన వాక్యనిర్మాణం “లో అందించబడింది తరగతి లైన్ బిగింపును వర్తింపజేయడానికి మూలకం యొక్క లక్షణం:
పైన నిర్వచించిన సింటాక్స్‌లో, వినియోగదారు '' నుండి సంఖ్యలను ఉపయోగించవచ్చు 1 నుండి 6 వరకు ” డిఫాల్ట్ లైన్-క్లాంపింగ్ తరగతులను ఉపయోగించడం కోసం. ఉదాహరణకు, ' లైన్-బిగింపు-1 ” క్లాస్ టెక్స్ట్ కంటెంట్‌ని ఒక లైన్‌కు మించనివ్వదు.
కొన్ని ఉదాహరణల ద్వారా 'లైన్-క్యాంప్' తరగతి భావనను అర్థం చేసుకుందాం.
ఉదాహరణ 1: నిర్దిష్ట లైన్ల సంఖ్యకు కంటెంట్‌ను పరిమితం చేయడానికి లైన్ క్లాంప్ క్లాస్‌ని ఉపయోగించండి
టెయిల్‌విండ్‌లోని లైన్-క్లాంపింగ్ క్లాస్‌ని ఉపయోగించి టెక్స్ట్ కంటెంట్‌ని మూడు లైన్లకు పరిమితం చేద్దాం, క్రింద చేసినట్లుగా:
< div తరగతి = 'రౌండ్-ఎల్‌జి ఫ్లెక్స్ జస్టిఫై-సెంటర్ బిజి-స్లేట్-200 మీ-5 పి-4' >
< p తరగతి = 'లైన్-క్లాంప్-3 w-72' > ఇది నమూనా పేరా. ఇది 3 లైన్లకు మాత్రమే కనిపిస్తుంది. దాని తర్వాత మొత్తం కంటెంట్ దాచబడుతుంది. టైల్‌విండ్‌లోని లైన్ క్లాంపింగ్ క్లాస్ దీనికి కారణం. < / p >
< / div >
పై కోడ్ యొక్క వివరణ క్రింది విధంగా ఉంది:
- ఎ' div ' మూలకం 'ని ఉపయోగించి గుండ్రని మూలలతో సృష్టించబడుతుంది గుండ్రని-lg ” తరగతి. ఇది 'ని ఉపయోగించి మార్జిన్ మరియు పాడింగ్‌ను అందిస్తుంది m-{సంఖ్య} ” &” p-{సంఖ్య} 'తరగతులు.
- తర్వాత, div మూలకంలోని మూలకం 'ని ఉపయోగించి కేంద్రీకృతమై ఉంటుంది సమర్థించు-కేంద్రం 'తరగతి, మరియు' ఫ్లెక్స్ ”క్లాస్ డివి యొక్క చైల్డ్ ఎలిమెంట్‌ని కలిగి ఉండే కంటైనర్‌ను సృష్టిస్తుంది.
- ది ' bg-{color}-{number} ” తరగతి div మూలకం యొక్క నేపథ్య రంగును సెట్ చేస్తుంది.
- ఎ' ” అనే ట్యాగ్ టెక్స్ట్ కంటెంట్‌తో రూపొందించబడింది. ఇది 'ని ఉపయోగించి స్థిర వెడల్పు అందించబడుతుంది w-{సంఖ్య} ” తరగతి.
- చివరగా, ' యొక్క వచన కంటెంట్ p 'మూలకం 'ని ఉపయోగించి మూడు పంక్తులకు పరిమితం చేయబడింది లైన్-బిగింపు-3 ” తరగతి.
అవుట్‌పుట్
పేర్కొన్న మూడు లైన్ల పరిమితిని మించిన టెక్స్ట్ కంటెంట్ దాచబడిందని అవుట్‌పుట్‌లో చూడవచ్చు:
ఉదాహరణ 2: టైల్‌విండ్‌లో డిఫాల్ట్ స్టేట్‌లతో లైన్ క్లాంప్ క్లాస్‌ని ఉపయోగించండి
Tailwind డిజైన్ లేఅవుట్‌లను మరింత డైనమిక్‌గా చేయడానికి ఉపయోగించే మూలకం కోసం వివిధ డిఫాల్ట్ స్థితులను అందిస్తుంది. డెవలపర్ ఈ స్టేట్‌లతో ఏదైనా టైల్‌విండ్ క్లాస్‌ని ఉపయోగించి ఆ స్థితిని సాధించినప్పుడు ఎలిమెంట్‌కు పేర్కొన్న డిజైన్ ప్రాపర్టీని అందించవచ్చు. అదేవిధంగా, ఈ డిఫాల్ట్ టైల్‌విండ్ స్థితులతో “లైన్-క్లాంప్” క్లాస్ కూడా ఉపయోగించవచ్చు.
టైల్‌విండ్‌లో స్టేట్‌తో “లైన్-క్లాంప్” క్లాస్‌ని ఉపయోగించడం కోసం సింటాక్స్ క్రింద ఇవ్వబడింది:
{ రాష్ట్రం } : లైన్ బిగింపు- { సంఖ్య }ఈ క్రింది విధంగా వివరించబడిన మూడు డిఫాల్ట్ రాష్ట్రాలు ఉన్నాయి:
- హోవర్: వినియోగదారు మౌస్ కర్సర్‌ను దానిపై ఉంచినప్పుడు ఇది మూలకం యొక్క స్థితి.
- దృష్టి: మూలకం దృష్టిలో ఉన్నప్పుడు ఇది స్థితి. ఉదాహరణకు, వినియోగదారు 'టాబ్' కీని నొక్కడం ద్వారా మూలకానికి నావిగేట్ చేస్తారు.
- క్రియాశీల: వినియోగదారు ద్వారా మూలకం సక్రియం చేయబడిన స్థితి.
దిగువ ప్రదర్శనలో, ప్రతిదీ మునుపటి ఉదాహరణకి సమానంగా ఉంటుంది. ఒకే తేడా ఏమిటంటే, లైన్-క్లాంపింగ్ క్లాస్ 'తో అందించబడింది హోవర్ ” రాష్ట్రం:
< div తరగతి = 'రౌండ్-ఎల్‌జి ఫ్లెక్స్ జస్టిఫై-సెంటర్ బిజి-స్లేట్-200 మీ-5 పి-4' >< p తరగతి = 'హోవర్:లైన్-క్లాంప్-3 w-72' > ఇది నమూనా పేరా. ఇది 3 లైన్లకు మాత్రమే కనిపిస్తుంది. దాని తర్వాత మొత్తం కంటెంట్ దాచబడుతుంది. టైల్‌విండ్‌లోని లిన్ క్లాంపింగ్ క్లాస్ దీనికి కారణం. < / p >
< / div >
గమనించండి ' 'తరగతి అందించబడింది' హోవర్: లైన్-క్లాంప్-3 ” క్లాస్, వినియోగదారు కంటెంట్ బాక్స్‌పై మౌస్ కర్సర్‌ను ఉంచినప్పుడల్లా టెక్స్ట్ కంటెంట్‌ను మూడు లైన్లకు పరిమితం చేస్తుంది.
అవుట్‌పుట్
మౌస్ కర్సర్ బ్లాక్‌పై హోవర్ చేసినప్పుడు లైన్ బిగింపు లక్షణం వర్తించబడుతుందని దిగువ అవుట్‌పుట్‌లో చూడవచ్చు:
ఉదాహరణ 3: బ్రేక్‌పాయింట్‌లతో లైన్ క్లాంప్ క్లాస్‌ని ఉపయోగించండి
బ్రేక్‌పాయింట్‌లు అనేది టైల్‌విండ్‌లోని మీడియా ప్రశ్నలు, ఇవి ప్రతిస్పందించే డిజైన్ లేఅవుట్‌ను రూపొందించడంలో వినియోగదారులకు సహాయపడతాయి. Tailwind ముందే నిర్వచించబడిన కనీస వెడల్పులతో ఐదు డిఫాల్ట్ బ్రేక్‌పాయింట్‌లను అందిస్తుంది. డెవలపర్ ఈ బ్రేక్‌పాయింట్‌లతో లైన్ క్లాంపింగ్ క్లాస్‌ని కూడా ఉపయోగించవచ్చు.
బ్రేక్‌పాయింట్‌లతో లైన్-క్లాంపింగ్ క్లాస్‌ని ఉపయోగించడం కోసం సింటాక్స్ క్రింది విధంగా ఉంది:
{ బ్రేక్ పాయింట్ ఉపసర్గలు } : లైన్ బిగింపు- { సంఖ్య }పై వాక్యనిర్మాణంలో పేర్కొన్న “బ్రేక్‌పాయింట్ ఉపసర్గలు” క్రింది విధంగా ఉన్నాయి:
- sm: ఈ బ్రేక్‌పాయింట్ కనిష్ట వెడల్పు 640px.
- md: ఈ బ్రేక్‌పాయింట్ కనిష్ట వెడల్పు 768px.
- lg: ఈ బ్రేక్‌పాయింట్ కనిష్ట వెడల్పు 1024px.
- xl: ఈ బ్రేక్‌పాయింట్ కనిష్ట వెడల్పు 1280px.
- 2xl: ఈ బ్రేక్‌పాయింట్ కనిష్ట వెడల్పు 1536px.
క్రింద అందించిన ప్రదర్శనలో, ' p ” మూలకం వేర్వేరు బ్రేక్‌పాయింట్‌లపై విభిన్న లైన్-క్లాంప్ తరగతులతో అందించబడింది. ఇది కొత్త బ్రేక్‌పాయింట్‌ను చేరుకున్నప్పుడు టెక్స్ట్ బ్లాక్ యొక్క లైన్-క్లాంపింగ్ ప్రాపర్టీని మారుస్తుంది:
< div తరగతి = 'రౌండ్-ఎల్‌జి ఫ్లెక్స్ జస్టిఫై-సెంటర్ బిజి-స్లేట్-200 మీ-5 పి-4' >< p తరగతి = 'లైన్-క్లాంప్-1 lg:లైన్-క్లాంప్-3 MD:లైన్-క్లాంప్-2 sm:లైన్-క్లాంప్-1 w-72' > ఇది నమూనా పేరా. ఇది 3 లైన్లకు మాత్రమే కనిపిస్తుంది. దాని తర్వాత మొత్తం కంటెంట్ దాచబడుతుంది. టైల్‌విండ్‌లోని లిన్ క్లాంపింగ్ క్లాస్ దీనికి కారణం. < / p >
< / div >
p మూలకం డిఫాల్ట్‌గా “లైన్-క్లాంప్-1” క్లాస్‌తో అందించబడుతుంది. అయితే, “p” మూలకంలోని టెక్స్ట్ కంటెంట్ “ కోసం ఒక లైన్‌కు పరిమితం చేయబడుతుంది sm 'బ్రేక్‌పాయింట్,' కోసం రెండు పంక్తులు md 'బ్రేక్‌పాయింట్ మరియు ' కోసం మూడు పంక్తులు lg ” బ్రేక్ పాయింట్.
అవుట్‌పుట్
అవుట్‌పుట్ నుండి, స్క్రీన్ పరిమాణం మారినప్పుడు టెక్స్ట్ బ్లాక్ యొక్క లైన్-క్లాంప్ ప్రాపర్టీ మారుతుందని స్పష్టంగా తెలుస్తుంది:
మేము టైల్‌విండ్‌లో నిర్దిష్ట సంఖ్యలో లైన్లకు వచనాన్ని బిగించే విధానాన్ని ప్రదర్శించాము.
ముగింపు
టైల్‌విండ్‌లోని లైన్ క్లాంప్ క్లాస్ ఒక మూలకం యొక్క టెక్స్ట్ కంటెంట్‌ని పేర్కొన్న లైన్ల సంఖ్యకు పరిమితం చేస్తుంది. “lin-clamp-{number}” క్లాస్ పరిమిత పంక్తులకు వచనాన్ని బిగించడానికి వాక్యనిర్మాణంగా ఉపయోగించబడుతుంది. లైన్ క్లాంప్ క్లాస్‌ను ముందే నిర్వచించిన బ్రేక్‌పాయింట్‌లు మరియు టైల్‌విండ్‌లోని స్టేట్ వేరియంట్‌లతో ఉపయోగించవచ్చు. ఈ కథనం నిర్దిష్ట సంఖ్యలో పంక్తులకు వచనాన్ని బిగించే విధానాన్ని అందించింది.