M

MLOG

தமிழ்

டெயில்விண்ட் CSS லைன் கிளாம்பு மூலம் உரை சுருக்கத்தை மாஸ்டர் செய்யுங்கள். மேம்பட்ட UI மற்றும் வாசிப்புத்தன்மைக்காக உரையை குறிப்பிட்ட எண்ணிக்கையிலான வரிகளுக்கு நேர்த்தியாக கட்டுப்படுத்துவது எப்படி என அறிக. நடைமுறை எடுத்துக்காட்டுகள் மற்றும் மேம்பட்ட நுட்பங்கள் அடங்கும்.

டெயில்விண்ட் CSS லைன் கிளாம்பு: உரை சுருக்கத்திற்கான முழுமையான வழிகாட்டி

நவீன வலை மேம்பாட்டில், உரை வழிதலை (text overflow) நிர்வகிப்பது ஒரு பொதுவான சவாலாகும். நீங்கள் தயாரிப்பு விளக்கங்கள், செய்தித் துணுக்குகள் அல்லது பயனர் உருவாக்கிய உள்ளடக்கத்தைக் காட்டினாலும், ஒரு சுத்தமான மற்றும் பயனர்-நட்பு இடைமுகத்திற்கு உரை நியமிக்கப்பட்ட எல்லைக்குள் இருப்பதை உறுதி செய்வது மிகவும் முக்கியம். டெயில்விண்ட் CSS இந்த சிக்கலுக்கு ஒரு சக்திவாய்ந்த மற்றும் வசதியான தீர்வை வழங்குகிறது: லைன் கிளாம்பு பயன்பாடு (Line Clamp utility).

இந்த விரிவான வழிகாட்டி, டெயில்விண்ட் CSS லைன் கிளாம்பு பயன்படுத்துவது பற்றி நீங்கள் தெரிந்து கொள்ள வேண்டிய அனைத்தையும், அடிப்படைச் செயலாக்கத்திலிருந்து மேம்பட்ட நுட்பங்கள் மற்றும் அணுகல்தன்மை பரிசீலனைகள் வரை ஆராயும். நாங்கள் நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பொதுவான பயன்பாட்டு நிகழ்வுகளை உள்ளடக்குவோம், உங்கள் திட்டங்களில் உரை சுருக்கத்தை நீங்கள் நம்பிக்கையுடன் செயல்படுத்த முடியும் என்பதை உறுதிசெய்வோம்.

டெயில்விண்ட் CSS லைன் கிளாம்பு என்றால் என்ன?

டெயில்விண்ட் CSS லைன் கிளாம்பு என்பது ஒரு பயன்பாட்டு வகுப்பாகும், இது ஒரு தனிமத்தின் உள்ளடக்கத்தை ஒரு குறிப்பிட்ட எண்ணிக்கையிலான வரிகளுக்குள் கட்டுப்படுத்த உங்களை அனுமதிக்கிறது. உரை வரையறுக்கப்பட்ட வரம்பை மீறும் போது, அது சுருக்கப்பட்டு, மறைக்கப்பட்ட உள்ளடக்கத்தின் இருப்பைக் குறிக்க ஒரு நீள்வட்டக்குறி (...) சேர்க்கப்படுகிறது. இது உங்கள் வலைத்தளம் அல்லது பயன்பாட்டின் தளவமைப்பை சீர்குலைக்காமல் உரை வழிதலைக் கையாள ஒரு பார்வைக்கு ஈர்க்கக்கூடிய வழியை வழங்குகிறது.

உள்ளார்ந்தமாக, லைன் கிளாம்பு CSS `overflow: hidden;` மற்றும் `text-overflow: ellipsis;` பண்புகளையும், `-webkit-line-clamp` பண்பையும் (இது ஒரு தரமற்ற, ஆனால் பரவலாக ஆதரிக்கப்படும் உரையை ஒரு குறிப்பிட்ட எண்ணிக்கையிலான வரிகளுக்குள் கட்டுப்படுத்தும் பண்பு) பயன்படுத்துகிறது. டெயில்விண்ட் CSS இந்த செயல்பாட்டை உள்ளடக்கிய உள்ளுணர்வு பயன்பாட்டு வகுப்புகளின் தொகுப்பை வழங்குவதன் மூலம் செயல்முறையை எளிதாக்குகிறது.

ஏன் டெயில்விண்ட் CSS லைன் கிளாம்பு பயன்படுத்த வேண்டும்?

உரை சுருக்கத்திற்காக டெயில்விண்ட் CSS லைன் கிளாம்பைப் பயன்படுத்த பல வலுவான காரணங்கள் உள்ளன:

அடிப்படை செயலாக்கம்

டெயில்விண்ட் CSS லைன் கிளாம்பைப் பயன்படுத்த, முதலில் உங்கள் திட்டத்தில் டெயில்விண்ட் CSS நிறுவப்பட்டு கட்டமைக்கப்பட்டிருக்க வேண்டும். அதிகாரப்பூர்வ டெயில்விண்ட் CSS இணையதளத்தில் விரிவான நிறுவல் வழிமுறைகளைக் காணலாம்.

டெயில்விண்ட் அமைக்கப்பட்டவுடன், ஒரு தனிமத்தின் உள்ளடக்கத்தை *n* வரிகளுக்குள் கட்டுப்படுத்த, நீங்கள் `line-clamp-{n}` பயன்பாட்டு வகுப்பைப் பயன்படுத்தலாம். எடுத்துக்காட்டாக, ஒரு பத்தியை மூன்று வரிகளுக்குள் கட்டுப்படுத்த, நீங்கள் பின்வரும் குறியீட்டைப் பயன்படுத்துவீர்கள்:


<p class="line-clamp-3">
  இது ஒரு நீண்ட பத்தி உரையாகும், இது மூன்று வரிகளுக்கு சுருக்கப்படும்.
  உரை மூன்று-வரி வரம்பை மீறும் போது, ஒரு நீள்வட்டக்குறி (...) சேர்க்கப்படும்.
</p>

முக்கியம்: லைன் கிளாம்பு சரியாக வேலை செய்ய, தனிமத்தில் `overflow: hidden;` மற்றும் `display: -webkit-box; -webkit-box-orient: vertical;` ஸ்டைல்கள் பயன்படுத்தப்பட்டிருக்க வேண்டும். நீங்கள் `line-clamp-{n}` பயன்பாட்டு வகுப்புகளைப் பயன்படுத்தும்போது டெயில்விண்ட் இந்த ஸ்டைல்களை தானாகவே சேர்க்கிறது.

நடைமுறை எடுத்துக்காட்டுகள்

பல்வேறு சூழ்நிலைகளில் டெயில்விண்ட் CSS லைன் கிளாம்பை எவ்வாறு பயன்படுத்துவது என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வோம்:

எடுத்துக்காட்டு 1: ஒரு இ-காமர்ஸ் இணையதளத்தில் தயாரிப்பு விளக்கம்

ஒரு இ-காமர்ஸ் இணையதளத்தில், நீங்கள் அடிக்கடி ஒரு குறிப்பிட்ட இடத்திற்குள் தயாரிப்பு விளக்கங்களைக் காட்ட வேண்டும். நீண்ட விளக்கங்கள் வழிந்து தளவமைப்பை சீர்குலைப்பதைத் தடுக்க லைன் கிளாம்பைப் பயன்படுத்தலாம்.


<div class="w-64"
  <img src="product-image.jpg" alt="தயாரிப்பு படம்" class="w-full h-40 object-cover rounded-md mb-2">
  <h3 class="font-semibold text-lg mb-1">தயாரிப்பு தலைப்பு</h3>
  <p class="text-gray-600 text-sm line-clamp-3">
    இது ஒரு விரிவான தயாரிப்பு விளக்கம். இது தயாரிப்பின் அம்சங்கள், விவரக்குறிப்புகள் மற்றும் நன்மைகள் பற்றிய தகவல்களை வழங்குகிறது.
    பக்கத்தில், குறிப்பாக சிறிய திரைகளில், விளக்கம் அதிக இடத்தை எடுத்துக் கொள்ளாமல் இருப்பதை உறுதி செய்ய வேண்டும்.
  </p>
  <a href="#" class="text-blue-500 hover:underline text-sm">மேலும் அறிக</a>
</div>

இந்த எடுத்துக்காட்டு தயாரிப்பு விளக்கத்தை மூன்று வரிகளுக்குள் கட்டுப்படுத்துகிறது. விளக்கம் இந்த வரம்பை மீறினால், அது சுருக்கப்பட்டு, ஒரு நீள்வட்டக்குறி காட்டப்படும். "மேலும் அறிக" இணைப்பு பயனர்களை முழு விளக்கத்தையும் ஒரு தனி பக்கத்தில் காண அனுமதிக்கிறது.

எடுத்துக்காட்டு 2: ஒரு செய்தி இணையதளத்தில் செய்தித் துணுக்குகள்

செய்தி இணையதளங்கள் பெரும்பாலும் தங்கள் முகப்புப்பக்கத்தில் கட்டுரைகளின் துணுக்குகளைக் காட்டுகின்றன. சுருக்கமான மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய துணுக்குகளை உருவாக்க லைன் கிளாம்பைப் பயன்படுத்தலாம்.


<div class="w-96"
  <h2 class="font-bold text-xl mb-2">முக்கிய செய்தித் தலைப்பு</h2>
  <p class="text-gray-700 line-clamp-4">
    இது முக்கிய செய்திக் கதையின் ஒரு சுருக்கமான சுருக்கமாகும். இது முக்கிய விவரங்களை வழங்குகிறது
    மற்றும் பயனர்களை மேலும் தகவலுக்கு கட்டுரையைக் கிளிக் செய்ய ஊக்குவிக்கிறது. நாங்கள் மிக முக்கியமான தகவல்களை
    முன்னிலைப்படுத்த விரும்புகிறோம், அதே நேரத்தில் தளவமைப்பை சுத்தமாகவும் ஒழுங்காகவும் வைத்திருக்கிறோம்.
  </p>
  <a href="#" class="text-blue-500 hover:underline text-sm">மேலும் வாசிக்க</a>
</div>

இந்த எடுத்துக்காட்டில், செய்தித் துணுக்கு நான்கு வரிகளுக்குள் கட்டுப்படுத்தப்பட்டுள்ளது. தலைப்பு சூழலை வழங்குகிறது, மற்றும் துணுக்கு கதையின் ஒரு விரைவான கண்ணோட்டத்தை வழங்குகிறது. "மேலும் வாசிக்க" இணைப்பு பயனர்களை முழு கட்டுரைக்கும் வழிநடத்துகிறது.

எடுத்துக்காட்டு 3: ஒரு சமூக ஊடக தளத்தில் பயனர் கருத்துகள்

சமூக ஊடக தளங்கள் பெரும்பாலும் பயனர் கருத்துகளைக் காட்டுகின்றன. நீண்ட கருத்துகள் பயனர் இடைமுகத்தை அதிகமாக ஆக்கிரமிப்பதைத் தடுக்க லைன் கிளாம்பைப் பயன்படுத்தலாம்.


<div class="flex items-start"
  <img src="user-avatar.jpg" alt="பயனர் அவதாரம்" class="w-8 h-8 rounded-full mr-2">
  <div class="flex-1"
    <h4 class="font-semibold text-sm">பயனர்பெயர்</h4>
    <p class="text-gray-800 text-sm line-clamp-2">
      இது ஒரு பயனர் கருத்து. இது ஒரு குறிப்பிட்ட தலைப்பில் பயனரின் கருத்தை வெளிப்படுத்துகிறது.
      கருத்து தெரியும் படியும் ஆனால் கருத்துப் பிரிவில் அதிக இடத்தை எடுத்துக் கொள்ளாமலும் இருப்பதை நாங்கள் உறுதிப்படுத்த விரும்புகிறோம்.
    </p>
  </div>
</div>

இந்த எடுத்துக்காட்டு பயனர் கருத்துகளை இரண்டு வரிகளுக்குள் கட்டுப்படுத்துகிறது. பயனரின் அவதாரம் மற்றும் பயனர்பெயர் சூழலை வழங்குகின்றன, மேலும் கருத்து வரம்பை மீறினால் அது சுருக்கப்படுகிறது. இது ஒரு சுத்தமான மற்றும் ஒழுங்கமைக்கப்பட்ட கருத்துப் பகுதியைப் பராமரிக்க உதவுகிறது.

பதிலளிக்கக்கூடிய லைன் கிளாம்பிங் (Responsive Line Clamping)

டெயில்விண்ட் CSS, பிரேக்பாயிண்ட் மாடிஃபையர்களைப் பயன்படுத்தி லைன் கிளாம்பை பதிலளிக்கக்கூடிய வகையில் பயன்படுத்த உங்களை அனுமதிக்கிறது. இதன் பொருள் நீங்கள் திரையின் அளவைப் பொறுத்து காட்டப்படும் வரிகளின் எண்ணிக்கையை சரிசெய்யலாம். எடுத்துக்காட்டாக, பெரிய திரைகளில் அதிக வரிகளையும் சிறிய திரைகளில் குறைவான வரிகளையும் காட்ட விரும்பலாம்.


<p class="line-clamp-2 md:line-clamp-3 lg:line-clamp-4">
  இந்தப் பத்தி சிறிய திரைகளில் இரண்டு வரிகளுக்கும், நடுத்தர திரைகளில் மூன்று வரிகளுக்கும்,
  மற்றும் பெரிய திரைகளில் நான்கு வரிகளுக்கும் சுருக்கப்படும்.
</p>

இந்த எடுத்துக்காட்டில்:

இது வெவ்வேறு திரை அளவுகள் மற்றும் சாதனங்களுக்கு ஏற்றவாறு ஒரு பதிலளிக்கக்கூடிய உரை சுருக்க உத்தியை உருவாக்க உங்களை அனுமதிக்கிறது.

லைன் கிளாம்பைத் தனிப்பயனாக்குதல்

டெயில்விண்ட் CSS இயல்புநிலை `line-clamp-{n}` பயன்பாட்டு வகுப்புகளின் தொகுப்பை வழங்கினாலும், உங்கள் குறிப்பிட்ட வடிவமைப்புத் தேவைகளுக்கு ஏற்ப இந்த மதிப்புகளை நீங்கள் தனிப்பயனாக்கலாம். இதை `tailwind.config.js` கோப்பை மாற்றுவதன் மூலம் செய்யலாம்.

குறிப்பு: தனிப்பயனாக்குவதற்கு முன், ஏற்கனவே உள்ள டெயில்விண்ட் பயன்பாடுகளைப் பயன்படுத்தி விரும்பிய விளைவை அடைய முடியுமா என்பதை கவனமாகக் கருதுங்கள். அதிகப்படியான தனிப்பயனாக்கம் CSS கோப்பு அளவை அதிகரிக்கவும் பராமரிப்புத்தன்மையைக் குறைக்கவும் வழிவகுக்கும்.

லைன் கிளாம்பு மதிப்புகளை எவ்வாறு தனிப்பயனாக்கலாம் என்பது இங்கே:


// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      lineClamp: {
        7: '7',
        8: '8',
        9: '9',
        10: '10',
      }
    },
  },
  plugins: [
    require('@tailwindcss/line-clamp'),
  ],
}

இந்த எடுத்துக்காட்டில், 7, 8, 9 மற்றும் 10 வரிகளுக்கான தனிப்பயன் `lineClamp` மதிப்புகளைச் சேர்த்துள்ளோம். இந்த தனிப்பயன் மதிப்புகளைச் சேர்த்த பிறகு, மாற்றங்கள் நடைமுறைக்கு வர நீங்கள் `npm run dev` அல்லது `yarn dev` (அல்லது உங்கள் டெயில்விண்ட் உருவாக்க செயல்முறையைத் தொடங்கும் எந்த கட்டளையாக இருந்தாலும்) இயக்க வேண்டும். பின்னர் நீங்கள் புதிய பயன்பாட்டு வகுப்புகளை இதுபோலப் பயன்படுத்தலாம்:


<p class="line-clamp-7">
  இந்தப் பத்தி ஏழு வரிகளுக்கு சுருக்கப்படும்.
</p>

பரிசீலனைகள் மற்றும் சிறந்த நடைமுறைகள்

டெயில்விண்ட் CSS லைன் கிளாம்பு ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், அதை பொறுப்புடன் பயன்படுத்துவதும் பின்வருவனவற்றைக் கருத்தில் கொள்வதும் முக்கியம்:

அணுகல்தன்மை

உரை சுருக்கம் கவனமாக செயல்படுத்தப்படாவிட்டால் அணுகல்தன்மையை எதிர்மறையாக பாதிக்கலாம். ஸ்கிரீன் ரீடர்கள் அல்லது பிற உதவித் தொழில்நுட்பங்களைச் சார்ந்திருக்கும் பயனர்கள் மறைக்கப்பட்ட உள்ளடக்கத்தை அணுக முடியாமல் போகலாம். இதைக் குறைக்க:

`title` பண்பைப் பயன்படுத்தும் எடுத்துக்காட்டு:


<p class="line-clamp-3" title="இது பத்தியின் முழுமையான உரையாகும். இது சுருக்கப்பட்ட பதிப்பில் தெரியாத கூடுதல் தகவல்களை வழங்குகிறது.">
  இது ஒரு நீண்ட பத்தி உரையாகும், இது மூன்று வரிகளுக்கு சுருக்கப்படும்.
  உரை மூன்று-வரி வரம்பை மீறும் போது, ஒரு நீள்வட்டக்குறி (...) சேர்க்கப்படும்.
</p>
<a href="#">மேலும் வாசிக்க</a>

பயனர் அனுபவம்

சுருக்க புள்ளி தர்க்கரீதியானதாகவும், உரையின் ஓட்டத்தை குறுக்கிடாததாகவும் இருப்பதை உறுதிசெய்யவும். முடிந்தால், ஒரு வாக்கியம் அல்லது சொற்றொடரின் நடுவில் சுருக்கப்படுவதைத் தவிர்க்கவும். உள்ளடக்கத்தின் சூழலைக் கருத்தில் கொண்டு, ஒரு அர்த்தமுள்ள துணுக்கை வழங்கும் சுருக்க புள்ளியைத் தேர்வுசெய்யவும்.

செயல்திறன்

டெயில்விண்ட் CSS பொதுவாக செயல்திறன் மிக்கதாக இருந்தாலும், லைன் கிளாம்பின் அதிகப்படியான பயன்பாடு, குறிப்பாக தனிப்பயன் மதிப்புகளுடன், ரெண்டரிங் செயல்திறனை பாதிக்கக்கூடும். ஒரு சுமூகமான பயனர் அனுபவத்தை உறுதிசெய்ய உங்கள் செயலாக்கத்தை வெவ்வேறு சாதனங்கள் மற்றும் உலாவிகளில் சோதிக்கவும்.

குறுக்கு-உலாவி இணக்கத்தன்மை

டெயில்விண்ட் CSS லைன் கிளாம்பு `-webkit-line-clamp` பண்பைச் சார்ந்துள்ளது, இது முக்கியமாக வெப்கிட்-அடிப்படையிலான உலாவிகள் (Chrome, Safari) மற்றும் பிளிங்க்-அடிப்படையிலான உலாவிகளால் (Edge, Opera) ஆதரிக்கப்படுகிறது. இருப்பினும், பெரும்பாலான நவீன உலாவிகள் இப்போது அதை ஆதரிக்கின்றன. இணக்கத்தன்மையை உறுதிப்படுத்த உங்கள் செயலாக்கத்தை வெவ்வேறு உலாவிகளில் எப்போதும் சோதிக்கவும்.

`-webkit-line-clamp` ஐ ஆதரிக்காத பழைய உலாவிகளை நீங்கள் ஆதரிக்க வேண்டும் என்றால், நீங்கள் ஒரு பாலிஃபில் அல்லது மாற்று CSS நுட்பங்களைப் பயன்படுத்த வேண்டியிருக்கலாம்.

லைன் கிளாம்பிற்கு மாற்றுகள்

டெயில்விண்ட் CSS லைன் கிளாம்பு உரை சுருக்கத்திற்கான ஒரு வசதியான தீர்வாக இருந்தாலும், நீங்கள் கருத்தில் கொள்ளக்கூடிய மாற்று அணுகுமுறைகள் உள்ளன:

சிறந்த அணுகுமுறை உங்கள் திட்டத்தின் குறிப்பிட்ட தேவைகள் மற்றும் சுருக்க செயல்முறையின் மீது உங்களுக்குத் தேவையான கட்டுப்பாட்டின் அளவைப் பொறுத்தது.

முடிவுரை

டெயில்விண்ட் CSS லைன் கிளாம்பு உங்கள் வலைத் திட்டங்களில் உரை சுருக்கத்தைக் கையாள ஒரு எளிய மற்றும் பயனுள்ள வழியை வழங்குகிறது. டெயில்விண்டின் பயன்பாட்டு வகுப்புகளைப் பயன்படுத்துவதன் மூலம், ஒரு தனிமத்தின் உள்ளடக்கத்தை ஒரு குறிப்பிட்ட எண்ணிக்கையிலான வரிகளுக்குள் எளிதாகக் கட்டுப்படுத்தலாம், இது ஒரு சுத்தமான மற்றும் பயனர்-நட்பு இடைமுகத்தை உறுதி செய்கிறது.

லைன் கிளாம்பை செயல்படுத்தும்போது அணுகல்தன்மை, பயனர் அனுபவம் மற்றும் செயல்திறன் ஆகியவற்றைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள். இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உங்கள் வலைத்தளங்கள் மற்றும் பயன்பாடுகளின் காட்சி முறையீடு மற்றும் பயன்பாட்டினை மேம்படுத்த நீங்கள் நம்பிக்கையுடன் லைன் கிளாம்பைப் பயன்படுத்தலாம்.

இந்த விரிவான வழிகாட்டி டெயில்விண்ட் CSS லைன் கிளாம்பைப் பற்றிய ஆழமான பார்வையை வழங்குகிறது மற்றும் அதன் பயன்பாட்டை நிரூபிக்க நடைமுறை எடுத்துக்காட்டுகளை வழங்குகிறது. இந்த கட்டுரை டெயில்விண்ட் CSS இல் இந்த அற்புதமான பயன்பாட்டை எவ்வாறு பயன்படுத்துவது என்பது பற்றிய ஒரு அடிப்படை புரிதலை வழங்கியுள்ளது என்று நம்புகிறேன். இப்போது, சென்று அதைப் பயன்படுத்துங்கள்!