ستوفر هذه المقالة الإجراء الخاص بتثبيت النص في Tailwind.
كيفية تثبيت النص على عدد محدد من الأسطر؟
تحدد فئة ربط الخط في Tailwind محتوى النص في الكتلة بعدد معين من الأسطر. من خلال القيام بذلك، ستقوم كتلة النص بإخفاء النص بعد عدد الأسطر المحددة في الفصل الدراسي. يمكن استخدامه على صفحة ويب ليُظهر للمستخدم أن هناك بعض المعلومات النصية أو لإخفاء كل النص غير الضروري لتجنب تشبع صفحة الويب.
بناء الجملة
يتم توفير بناء الجملة الموضح أدناه في ' فصل 'سمة عنصر لتطبيق لقط الخط:
في بناء الجملة المحدد أعلاه، يمكن للمستخدم استخدام الأرقام من ' 1 إلى 6 ' لاستخدام فئات ربط الخط الافتراضية. على سبيل المثال، ' خط المشبك-1 'لن تسمح فئة محتوى النص بتجاوز سطر واحد.
دعونا نفهم مفهوم فئة 'line-camp' من خلال بعض الأمثلة.
مثال 1: استخدم فئة Line Clamp لتقييد المحتوى بعدد محدد من الخطوط
لنقصر محتوى النص على ثلاثة أسطر باستخدام فئة ربط الخط في Tailwind كما هو موضح أدناه:
< شعبة فصل = ' مدور-إل جي فليكس جوستيفاي-سنتر بي جي-سلات-200 م-5 ف-4' >
< ص فصل = 'خط-مشبك-3ث-72' > هذه فقرة العينة. سيكون مرئيًا لمدة 3 أسطر فقط. كل المحتوى بعد أن يصبح مخفيا. ويرجع ذلك إلى فئة تثبيت الخط في Tailwind. < / ص >
< / شعبة >
شرح الكود أعلاه هو كما يلي:
- أ ' شعبة 'يتم إنشاء العنصر بزوايا مستديرة باستخدام' مدور إل جي ' فصل. يوفر الهامش والحشو باستخدام ' م-{رقم} ' & ' ص-{رقم} ' الطبقات.
- بعد ذلك، يتم توسيط العنصر الموجود في عنصر div باستخدام ' تبرير المركز 'الطبقة، و' ثني 'تنشئ الفئة حاوية تحتوي على العنصر الفرعي لـ div.
- ال ' ب ج-{اللون}-{رقم} 'فئة تحدد لون خلفية عنصر div.
- أ ' <ص> يتم إنشاء علامة تحتوي على محتوى النص. يتم توفير عرض ثابت باستخدام ' ث-{رقم} ' فصل.
- وأخيرًا، محتوى النص الخاص بـ ' ص ' يقتصر العنصر على ثلاثة أسطر باستخدام ' خط المشبك-3 ' فصل.
انتاج |
يمكن أن نرى في الإخراج أن محتوى النص الذي تجاوز الحد المحدد وهو ثلاثة أسطر مخفي:
المثال 2: استخدم فئة Line Clamp مع الحالات الافتراضية في Tailwind
يوفر Tailwind حالات افتراضية متنوعة للعنصر الذي يمكن استخدامه لجعل تخطيطات التصميم أكثر ديناميكية. يمكن للمطور استخدام أي فئة Tailwind بهذه الحالات لتوفير خاصية التصميم المحددة للعنصر كلما تم تحقيق تلك الحالة. وبالمثل، يمكن أيضًا استخدام فئة 'line-clamp' مع حالات Tailwind الافتراضية هذه.
فيما يلي بناء جملة استخدام فئة 'line-clamp' مع الحالة في Tailwind:
{ ولاية } : خط المشبك- { رقم }هناك ثلاث حالات افتراضية موضحة على النحو التالي:
- يحوم: إنها حالة العنصر عندما يقوم المستخدم بتمرير مؤشر الماوس فوقه.
- ركز: إنها الحالة التي يكون فيها العنصر في بؤرة التركيز. على سبيل المثال، ينتقل المستخدم إلى العنصر بالضغط على مفتاح 'tab'.
- نشيط: الحالة التي يتم فيها تنشيط العنصر من قبل المستخدم.
في العرض التوضيحي أدناه، كل شيء مطابق للمثال السابق. والفرق الوحيد هو أن فئة ربط الخط مزودة بـ ' يحوم ' ولاية:
< شعبة فصل = ' مدور-إل جي فليكس جوستيفاي-سنتر بي جي-سلات-200 م-5 ف-4' >< ص فصل = 'التحويم: خط المشبك-3 ث-72' > هذه فقرة العينة. سيكون مرئيًا لمدة 3 أسطر فقط. كل المحتوى بعد أن يصبح مخفيا. ويرجع ذلك إلى فئة تثبيت لين في Tailwind. < / ص >
< / شعبة >
نلاحظ أن ' <ص> 'يتم توفير الفئة بواسطة' تحوم: خط المشبك-3 '، والتي ستحدد محتوى النص بثلاثة أسطر عندما يقوم المستخدم بتمرير مؤشر الماوس فوق مربع المحتوى.
انتاج |
يمكن أن نرى في الإخراج أدناه أنه يتم تطبيق خاصية تثبيت الخط عندما يمرر مؤشر الماوس فوق الكتلة:
مثال 3: استخدم فئة Line Clamp مع نقاط التوقف
نقاط التوقف هي استعلامات وسائط في Tailwind تساعد المستخدمين على إنشاء تخطيط تصميم سريع الاستجابة. يوفر Tailwind خمس نقاط توقف افتراضية مع الحد الأدنى للعرض المحدد مسبقًا. يمكن للمطور أيضًا استخدام فئة تثبيت الخط مع نقاط التوقف هذه.
بناء جملة استخدام فئة ربط الخط مع نقاط التوقف هو كما يلي:
{ بادئات نقطة التوقف } : خط المشبك- { رقم }'بادئات نقطة التوقف' المذكورة في بناء الجملة أعلاه هي كما يلي:
- ن: الحد الأدنى لعرض نقطة التوقف هذه هو 640 بكسل.
- م: الحد الأدنى لعرض نقطة التوقف هذه هو 768 بكسل.
- إل جي: الحد الأدنى لعرض نقطة التوقف هذه هو 1024 بكسل.
- XL: الحد الأدنى لعرض نقطة التوقف هذه هو 1280 بكسل.
- 2xl: الحد الأدنى لعرض نقطة التوقف هذه هو 1536 بكسل.
في العرض التوضيحي الموضح أدناه، ' ص يتم تزويد العنصر بفئات مختلفة من مشبك الخط عند نقاط توقف مختلفة. سيؤدي هذا إلى تغيير خاصية ربط الأسطر الخاصة بكتلة النص عند الوصول إلى نقطة التوقف الجديدة:
< شعبة فصل = ' مدور-إل جي فليكس جوستيفاي-سنتر بي جي-سلات-200 م-5 ف-4' >< ص فصل = ' خط-مشبك-1 lg:خط-مشبك-3 md:خط-مشبك-2 sm:خط-مشبك-1 w-72' > هذه فقرة العينة. سيكون مرئيًا لمدة 3 أسطر فقط. كل المحتوى بعد أن يصبح مخفيا. ويرجع ذلك إلى فئة تثبيت لين في Tailwind. < / ص >
< / شعبة >
يتم تزويد العنصر p بفئة 'line-clamp-1' بشكل افتراضي. ومع ذلك، فإن محتوى النص في العنصر 'p' سيقتصر على سطر واحد للعنصر ' سم 'نقطة توقف، سطرين لـ ' دكتور في الطب 'نقطة توقف، وثلاثة أسطر لـ ' إل جي 'نقطة توقف.
انتاج |
من المخرجات، يتضح أن خاصية line-clamp الخاصة بكتلة النص تتغير مع تغير حجم الشاشة:
لقد أظهرنا إجراء تثبيت النص على عدد محدد من الأسطر في Tailwind.
خاتمة
تحدد فئة ربط الخط في Tailwind محتوى نص العنصر بالعدد المحدد من الأسطر. يتم استخدام فئة 'lin-clamp-{number}' كتركيب لربط النص في أسطر محدودة. يمكن استخدام فئة مشبك الخط مع نقاط التوقف المحددة مسبقًا ومتغيرات الحالة في Tailwind. قدمت هذه المقالة الإجراء الخاص بتثبيت النص على عدد محدد من الأسطر.