شکستن متن های طولانی با سه نقطه ✍️

خلاصه:

از نظر سئو، این موضوع خیلی مهمه که وقتی ما مثلا یه محصولی رو وارد سایت میکنیم، تعداد کارکتر تایتل بیشتر از 55 تا نشه یا مثلا اگه یه باکسی برای نمایش محصول توی صفحه اصلی طراحی کردیم، تایتلی که توش، عنوان محصول نمایش داده میشه؛ نباید بیشتر از یه خط بشه. توی این مقاله یاد میگیریم که چطور میتونیم با tailwind.css این مشکل رو برطرفش کنیم. 

توضیح کامل:

واسه حل این مشکل، ما یه پلاگین برای تیلویند داریم و از اون استفاده می‌کنیم. اسمش line clamp هست. 

نصب و آموزش line clamp

به کارگیریش خیلی سادهست. 

1. ابتدا افزونه رو نصبش میکنیم. این کد رو توی ترمینال vscode پیست کنید و انتر بزنید.

npm install @tailwindcss/line-clamp

2. برید توی فایل کانفیگ تیلویند یعنی توی روت اصلی پروژه، فایل tailwind.config.js و این تیکه کد رو پیست کنید.

/** @type {import('tailwindcss').Config} */

module.exports = {

 content: [

 "./pages/**/*.{js,jsx,ts,tsx}",

 "./components/**/*.{js,jsx,ts,tsx}",

],

 theme: {

 extend: {},

 },

 plugins: [

 require('@tailwindcss/line-clamp'),

  ],

};   

در واقع مهمترین بخش همون خط سوم از آخر هست که فایل پلاگین رو فراخوانی می‌کنید.

3. حالا برید هر جایی که میخواید متنتون کوتاه بشه، کلاس line-clamp-1 رو بهش بدید مثلا 

<p className="line-clamp-3">

    learning next.js with mernfa.ir

p> 

فقط دقت کنید که این آموزش برای Next.js بود و به همین دلیل، توی تگ p از className استفاده شده.

همین. تموم. ممنون میشم اگر مفید بود براتون، نظر بدید توی سایت. 🌹🌻