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

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

یکی از دردسرهای هر طراح فرانتی، اینه که وقتی یه باکسی طراحی کرد، متن ازش بیرون نزنه و اگه از یه حدی بیشتر بود، با سه نقطه نمایشش بده. بررسی شکستن متن در next.js

زمان مطالعه6
زمان آخرین به‌روزرسانی۱۴۰۱/۵/۱۷
تعداد بازدید1,107

توضیحات کامل

خلاصه:

از نظر سئو، این موضوع خیلی مهمه که وقتی ما مثلا یه محصولی رو وارد سایت میکنیم، تعداد کارکتر تایتل بیشتر از 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 استفاده شده.

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

شاید به دردتون بخوره

دیدگاه ها

ارسال دیدگاهپیش از ارسال دیدگاه، باید وارد حساب کاربری خود شوید.
هنوز دیدگاهی ثبت نشده است.