இந்த கட்டுரை டெயில்விண்டில் உரையை இறுக்குவதற்கான செயல்முறையை வழங்கும்.
ஒரு குறிப்பிட்ட எண்ணிக்கையிலான வரிகளுக்கு உரையை எவ்வாறு இறுக்குவது?
டெயில்விண்டில் உள்ள லைன்-கிளாம்பிங் வகுப்பு ஒரு தொகுதியில் உள்ள உரை உள்ளடக்கத்தை குறிப்பிட்ட எண்ணிக்கையிலான வரிகளுக்கு வரம்பிடுகிறது. இதைச் செய்வதன் மூலம், வகுப்பில் குறிப்பிடப்பட்ட வரிகளின் எண்ணிக்கைக்குப் பிறகு உரைத் தொகுதி உரையை மறைக்கும். சில உரைத் தகவல்கள் இருப்பதைப் பயனருக்குக் காட்ட அல்லது வலைப்பக்கத்தில் செறிவூட்டப்படுவதைத் தவிர்க்க, தேவையற்ற அனைத்து உரைகளையும் மறைக்க இது ஒரு வலைப்பக்கத்தில் பயன்படுத்தப்படலாம்.
தொடரியல்
கீழே கொடுக்கப்பட்டுள்ள தொடரியல் ' வர்க்கம் வரி இறுக்கத்தைப் பயன்படுத்துவதற்கு ஒரு உறுப்பின் பண்புக்கூறு:
மேலே வரையறுக்கப்பட்ட தொடரியல், பயனர் '' இலிருந்து எண்களைப் பயன்படுத்தலாம் 1 முதல் 6 வரை 'இயல்புநிலை வரி-கிளாம்பிங் வகுப்புகளைப் பயன்படுத்துவதற்கு. உதாரணமாக, ' கோடு-கிளாம்ப்-1 ” வகுப்பு ஒரு வரிக்கு மேல் உரை உள்ளடக்கத்தை அனுமதிக்காது.
சில எடுத்துக்காட்டுகள் மூலம் 'லைன்-கேம்ப்' வகுப்பின் கருத்தைப் புரிந்துகொள்வோம்.
எடுத்துக்காட்டு 1: ஒரு குறிப்பிட்ட எண்ணிக்கையிலான வரிகளுக்கு உள்ளடக்கத்தை வரம்பிட லைன் கிளாம்ப் வகுப்பைப் பயன்படுத்தவும்
கீழே செய்யப்பட்டுள்ளபடி டெயில்விண்டில் உள்ள லைன்-கிளாம்பிங் வகுப்பைப் பயன்படுத்தி உரை உள்ளடக்கத்தை மூன்று வரிகளுக்கு வரம்பிடுவோம்:
< div வர்க்கம் = 'ரவுண்டட்-எல்ஜி ஃப்ளெக்ஸ் ஜஸ்டிஃபை-சென்டர் பிஜி-ஸ்லேட்-200 மீ-5 ப-4' >
< ப வர்க்கம் = 'line-clamp-3 w-72' > இது ஒரு மாதிரி பத்தி. இது 3 வரிகளுக்கு மட்டுமே தெரியும். அதன் பிறகு அனைத்து உள்ளடக்கமும் மறைக்கப்படும். டெயில்விண்டில் உள்ள லைன் கிளாம்பிங் கிளாஸ் இதற்குக் காரணம். < / ப >
< / div >
மேலே உள்ள குறியீட்டின் விளக்கம் பின்வருமாறு:
- ஒரு ' div 'உறுப்பு வட்டமான மூலைகளுடன் உருவாக்கப்படுகிறது' வட்டமான-எல்ஜி ' வர்க்கம். இது 'ஐப் பயன்படுத்தி விளிம்பு மற்றும் திணிப்பு வழங்குகிறது மீ-{எண்} ” &” ப-{எண்} ”வகுப்புகள்.
- அடுத்து, div உறுப்பில் உள்ள உறுப்பு 'ஐப் பயன்படுத்தி மையப்படுத்தப்படுகிறது. நியாயப்படுத்த-மையம் 'வகுப்பு, மற்றும்' நெகிழ்வு ” வகுப்பு ஒரு கொள்கலனை உருவாக்குகிறது, அது div இன் குழந்தை உறுப்பைக் கொண்டிருக்கும்.
- ' bg-{color}-{number} 'வகுப்பு div உறுப்பின் பின்னணி நிறத்தை அமைக்கிறது.
- ஒரு ' 'குறிச்சொல் உரை உள்ளடக்கத்தைக் கொண்டு உருவாக்கப்பட்டது. இதைப் பயன்படுத்தி நிலையான அகலம் வழங்கப்படுகிறது. w-{number} ' வர்க்கம்.
- இறுதியாக, உரை உள்ளடக்கம் ' ப 'உறுப்பு 'ஐப் பயன்படுத்தி மூன்று வரிகளுக்கு வரையறுக்கப்பட்டுள்ளது கோடு-கிளாம்ப்-3 ' வர்க்கம்.
வெளியீடு
மூன்று வரிகளின் குறிப்பிட்ட வரம்பை மீறிய உரை உள்ளடக்கம் மறைக்கப்பட்டிருப்பதை வெளியீட்டில் காணலாம்:
எடுத்துக்காட்டு 2: டெயில்விண்டில் இயல்பு நிலைகளுடன் லைன் கிளாம்ப் வகுப்பைப் பயன்படுத்தவும்
டெயில்விண்ட் ஒரு உறுப்புக்கான பல்வேறு இயல்புநிலை நிலைகளை வழங்குகிறது, இது வடிவமைப்பு தளவமைப்புகளை மிகவும் ஆற்றல்மிக்கதாக மாற்ற பயன்படுகிறது. டெவலப்பர் இந்த நிலைகளுடன் எந்த டெயில்விண்ட் வகுப்பையும் பயன்படுத்தி அந்த நிலையை அடையும்போதெல்லாம் உறுப்புக்கு குறிப்பிட்ட வடிவமைப்பு சொத்தை வழங்க முடியும். இதேபோல், 'லைன்-கிளாம்ப்' வகுப்பையும் இந்த இயல்புநிலை டெயில்விண்ட் நிலைகளுடன் பயன்படுத்தலாம்.
டெயில்விண்டில் ஒரு மாநிலத்துடன் “லைன்-கிளாம்ப்” வகுப்பைப் பயன்படுத்துவதற்கான தொடரியல் கீழே கொடுக்கப்பட்டுள்ளது:
{ நிலை } : லைன்-கிளாம்ப்- { எண் }மூன்று இயல்புநிலை நிலைகள் பின்வருமாறு விவரிக்கப்பட்டுள்ளன:
- மிதவை: பயனர் மவுஸ் கர்சரை அதன் மேல் வைத்திருக்கும் போது அது ஒரு தனிமத்தின் நிலை.
- கவனம்: உறுப்பு மையமாக இருக்கும்போது அது நிலை. எடுத்துக்காட்டாக, 'தாவல்' விசையை அழுத்துவதன் மூலம் பயனர் உறுப்புக்கு செல்லவும்.
- செயலில்: உறுப்பு பயனரால் செயல்படுத்தப்படும் நிலை.
கீழே உள்ள ஆர்ப்பாட்டத்தில், எல்லாம் முந்தைய உதாரணத்திற்கு ஒத்ததாக உள்ளது. ஒரே வித்தியாசம் என்னவென்றால், லைன்-கிளாம்பிங் வகுப்பு ' மிதவை ' நிலை:
< div வர்க்கம் = 'ரவுண்டட்-எல்ஜி ஃப்ளெக்ஸ் ஜஸ்டிஃபை-சென்டர் பிஜி-ஸ்லேட்-200 மீ-5 ப-4' >< ப வர்க்கம் = 'ஹோவர்:லைன்-கிளாம்ப்-3 w-72' > இது ஒரு மாதிரி பத்தி. இது 3 வரிகளுக்கு மட்டுமே தெரியும். அதன் பிறகு அனைத்து உள்ளடக்கமும் மறைக்கப்படும். டெயில்விண்டில் உள்ள லின் கிளாம்பிங் வகுப்புதான் இதற்குக் காரணம். < / ப >
< / div >
என்பதை கவனிக்கவும் ' 'வகுப்பு வழங்கப்படுகிறது' மிதவை:கோடு-கிளாம்ப்-3 ” கிளாஸ், இது பயனர் உள்ளடக்கப் பெட்டியின் மீது மவுஸ் கர்சரை வைத்திருக்கும் போதெல்லாம் உரை உள்ளடக்கத்தை மூன்று வரிகளுக்கு மட்டுப்படுத்தும்.
வெளியீடு
மவுஸ் கர்சர் பிளாக் மீது வட்டமிடும்போது கோடு கிளாம்பிங் பண்பு பயன்படுத்தப்படுவதை கீழே உள்ள வெளியீட்டில் காணலாம்:
எடுத்துக்காட்டு 3: பிரேக் பாயிண்ட்களுடன் லைன் கிளாம்ப் வகுப்பைப் பயன்படுத்தவும்
பிரேக் பாயிண்ட்ஸ் என்பது டெயில்விண்டில் உள்ள மீடியா வினவல்கள் ஆகும், இது பயனர்களுக்கு பதிலளிக்கக்கூடிய வடிவமைப்பு அமைப்பை உருவாக்க உதவுகிறது. டெயில்விண்ட் முன் வரையறுக்கப்பட்ட குறைந்தபட்ச அகலங்களுடன் ஐந்து இயல்புநிலை பிரேக் பாயின்ட்களை வழங்குகிறது. டெவலப்பர் இந்த பிரேக் பாயிண்ட்களுடன் லைன் கிளாம்பிங் வகுப்பையும் பயன்படுத்தலாம்.
பிரேக் பாயிண்ட்களுடன் லைன் கிளாம்பிங் வகுப்பைப் பயன்படுத்துவதற்கான தொடரியல் பின்வருமாறு:
{ பிரேக்பாயிண்ட் முன்னொட்டுகள் } : லைன்-கிளாம்ப்- { எண் }மேலே உள்ள தொடரியலில் குறிப்பிடப்பட்டுள்ள 'பிரேக்பாயிண்ட் முன்னொட்டுகள்' பின்வருமாறு:
- எஸ்எம்: இந்த பிரேக்பாயிண்ட் குறைந்தபட்ச அகலம் 640px ஆகும்.
- எம்டி: இந்த பிரேக்பாயிண்ட் குறைந்தபட்ச அகலம் 768px ஆகும்.
- lg: இந்த பிரேக் பாயிண்ட் குறைந்தபட்ச அகலம் 1024px ஆகும்.
- xl: இந்த பிரேக்பாயிண்ட் குறைந்தபட்ச அகலம் 1280px ஆகும்.
- 2xl: இந்த பிரேக்பாயிண்ட் குறைந்தபட்ச அகலம் 1536px ஆகும்.
கீழே கொடுக்கப்பட்டுள்ள ஆர்ப்பாட்டத்தில், ' ப ” உறுப்பு வெவ்வேறு பிரேக் பாயிண்ட்களில் வெவ்வேறு லைன்-கிளாம்ப் வகுப்புகளுடன் வழங்கப்படுகிறது. இது புதிய பிரேக் பாயிண்டை அடையும் போதெல்லாம் டெக்ஸ்ட் பிளாக்கின் லைன்-கிளாம்பிங் பண்பை மாற்றும்:
< div வர்க்கம் = 'ரவுண்டட்-எல்ஜி ஃப்ளெக்ஸ் ஜஸ்டிஃபை-சென்டர் பிஜி-ஸ்லேட்-200 மீ-5 ப-4' >< ப வர்க்கம் = ' line-clamp-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > இது ஒரு மாதிரி பத்தி. இது 3 வரிகளுக்கு மட்டுமே தெரியும். அதன் பிறகு அனைத்து உள்ளடக்கமும் மறைக்கப்படும். டெயில்விண்டில் உள்ள லின் கிளாம்பிங் வகுப்புதான் இதற்குக் காரணம். < / ப >
< / div >
p உறுப்பு முன்னிருப்பாக 'line-clamp-1' வகுப்புடன் வழங்கப்படுகிறது. இருப்பினும், 'p' உறுப்பில் உள்ள உரை உள்ளடக்கம் ' sm 'பிரேக் பாயிண்ட், இரண்டு கோடுகள்' எம்டி 'பிரேக் பாயிண்ட், மற்றும் மூன்று கோடுகள்' lg ” முறிவு புள்ளி.
வெளியீடு
வெளியீட்டில் இருந்து, திரையின் அளவு மாறும்போது உரைத் தொகுதியின் வரி-கிளாம்ப் பண்பு மாறுகிறது என்பது தெளிவாகிறது:
டெயில்விண்டில் குறிப்பிட்ட எண்ணிக்கையிலான வரிகளுக்கு உரையை இறுக்குவதற்கான செயல்முறையை நாங்கள் நிரூபித்துள்ளோம்.
முடிவுரை
டெயில்விண்டில் உள்ள லைன் கிளாம்ப் வகுப்பு, ஒரு உறுப்பின் உரை உள்ளடக்கத்தை குறிப்பிட்ட எண்ணிக்கையிலான வரிகளுக்கு வரம்பிடுகிறது. 'lin-clamp-{number}' வகுப்பு, உரையை வரையறுக்கப்பட்ட வரிகளுக்குப் பிணைக்க தொடரியல் ஆகப் பயன்படுத்தப்படுகிறது. லைன் கிளாம்ப் கிளாஸை முன் வரையறுக்கப்பட்ட பிரேக் பாயிண்ட்கள் மற்றும் டெயில்விண்டில் உள்ள மாநில மாறுபாடுகளுடன் பயன்படுத்தலாம். இந்தக் கட்டுரை குறிப்பிட்ட எண்ணிக்கையிலான வரிகளுக்கு உரையை இறுக்குவதற்கான செயல்முறையை வழங்குகிறது.