מאמר זה יספק את הפרוצדורה להדק את הטקסט ב-Tailwind.
כיצד להצמיד טקסט למספר מסוים של שורות?
מחלקת הידוק שורות ב-Tailwind מגבילה את תוכן הטקסט בבלוק למספר מסוים של שורות. על ידי כך, בלוק הטקסט יסתיר את הטקסט לאחר מספר השורות שצוין בכיתה. ניתן להשתמש בו בדף אינטרנט כדי להראות למשתמש שיש מידע טקסט או כדי להסתיר את כל הטקסט המיותר כדי למנוע רוויה בדף האינטרנט.
תחביר
התחביר הנתון להלן מסופק ב' מעמד ' תכונה של אלמנט להחלת הידוק קו:
בתחביר שהוגדר לעיל, המשתמש יכול להשתמש במספרים מתוך ' 1 עד 6 ' לשימוש במחלקות ברירת המחדל של הידוק שורות. למשל, ה' קו-מהדק-1 ' מחלקה לא תאפשר לתוכן הטקסט לחרוג משורה אחת.
בואו נבין את המושג של שיעור 'ליין-מחנה' באמצעות כמה דוגמאות.
דוגמה 1: השתמש במחלקת מהדק קו כדי להגביל את התוכן למספר מסוים של שורות
בוא נגביל את תוכן הטקסט לשלוש שורות באמצעות מחלקת הידוק השורות ב-Tailwind כפי שנעשה להלן:
< div מעמד = 'מעוגל-lg flex justify-center bg-slate-200 m-5 p-4' >
< ע מעמד = 'line-clamp-3 w-72' > זוהי פסקה לדוגמה. זה יהיה גלוי רק במשך 3 שורות. כל התוכן שאחריו יסתיר. זה נובע ממעמד הידוק הקו ב-Tailwind. < / ע >
< / div >
ההסבר של הקוד לעיל הוא כדלקמן:
- א ' div אלמנט ' נוצר עם פינות מעוגלות באמצעות ' מעוגל-lg ' מעמד. הוא מספק את השוליים והריפוד באמצעות ' m-{number} ' & ' p-{number} 'שיעורים.
- לאחר מכן, האלמנט באלמנט div מרוכז באמצעות ' להצדיק-מרכז הכיתה, וה- לְהַגמִישׁ ” class יוצר קונטיינר שיכיל את הרכיב הבן של ה-div.
- ה ' bg-{color}-{number} ” class מגדיר את צבע הרקע של אלמנט ה-div.
- א ' נוצר תג המכיל את תוכן הטקסט. הוא מסופק ברוחב קבוע באמצעות ' w-{number} ' מעמד.
- לבסוף, תוכן הטקסט של ' ע אלמנט ' מוגבל לשלוש שורות באמצעות ' קו-מהדק-3 ' מעמד.
תְפוּקָה
ניתן לראות בפלט שתוכן הטקסט שחרג מהמגבלה המצוינת של שלוש שורות מוסתר:
דוגמה 2: השתמש במחלקת מהדק קו עם מצבי ברירת מחדל ב-Tailwind
Tailwind מספקת מצבי ברירת מחדל שונים עבור אלמנט שניתן להשתמש בו כדי להפוך את פריסות העיצוב לדינמיות יותר. המפתח יכול להשתמש בכל מחלקה Tailwind עם המצבים האלה כדי לספק את מאפיין העיצוב שצוין לאלמנט בכל פעם שמצב זה מושג. באופן דומה, ניתן להשתמש במחלקה 'קו-הדק' גם עם מצבי ברירת המחדל של Tailwind.
התחביר לשימוש במחלקה 'קו-הדק' עם מצב ב-Tailwind ניתן להלן:
{ מדינה } : קו מהדק- { מספר }ישנם שלושה מצבי ברירת מחדל המתוארים באופן הבא:
- לְרַחֵף: זהו המצב של אלמנט כאשר המשתמש מרחף מעליו את סמן העכבר.
- מוֹקֵד: זהו המצב שבו האלמנט נמצא בפוקוס. לדוגמה, המשתמש מנווט לרכיב על ידי לחיצה על מקש 'טאב'.
- פָּעִיל: המצב שבו האלמנט מופעל על ידי המשתמש.
בהדגמה למטה, הכל זהה לדוגמא הקודמת. ההבדל היחיד הוא שמחלקת הידוק הקו מסופקת עם ' לְרַחֵף ' מדינה:
< div מעמד = 'מעוגל-lg flex justify-center bg-slate-200 m-5 p-4' >< ע מעמד = ' hover:line-clamp-3 w-72' > זוהי פסקה לדוגמה. זה יהיה גלוי רק במשך 3 שורות. כל התוכן שאחריו יסתיר. זה נובע משיעור ה-lin clamping ב-Tailwind. < / ע >
< / div >
שימו לב שה' השיעור מסופק על ידי ' hover:line-clamp-3 ” class, אשר יגביל את תוכן הטקסט לשלוש שורות בכל פעם שהמשתמש מרחף את סמן העכבר מעל תיבת התוכן.
תְפוּקָה
ניתן לראות בפלט שלהלן שמאפיין הידוק הקו מיושם כאשר סמן העכבר מרחף מעל הבלוק:
דוגמה 3: השתמש במחלקת מהדק קו עם נקודות שבירה
נקודות פריצה הן שאילתות מדיה ב-Tailwind שעוזרות למשתמשים ליצור פריסת עיצוב רספונסיבית. Tailwind מספק חמש נקודות עצירה ברירת מחדל עם רוחב מינימלי מוגדר מראש. המפתח יכול גם להשתמש במחלקת הידוק קו עם נקודות הפסקה הללו.
התחביר לשימוש במחלקת הידוק קו עם נקודות עצירה הוא כדלקמן:
{ קידומות נקודת שבירה } : קו מהדק- { מספר }'קידומות נקודת הפסקה' המוזכרות בתחביר לעיל הן כדלקמן:
- sm: לנקודת שבירה זו יש רוחב מינימלי של 640 פיקסלים.
- md: לנקודת שבירה זו יש רוחב מינימלי של 768 פיקסלים.
- lg: לנקודת שבירה זו יש רוחב מינימלי של 1024 פיקסלים.
- xl: לנקודת שבירה זו יש רוחב מינימלי של 1280 פיקסלים.
- 2xl: לנקודת שבירה זו יש רוחב מינימלי של 1536 פיקסלים.
בהדגמה המצורפת להלן, ' ע ' אלמנט מסופק עם מחלקות קו מהדק שונות בנקודות שבירה שונות. זה ישנה את מאפיין הידוק השורות של בלוק הטקסט בכל פעם שתגיע לנקודת הפסיקה החדשה:
< div מעמד = 'מעוגל-lg flex justify-center bg-slate-200 m-5 p-4' >< ע מעמד = ' line-clamp-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > זוהי פסקה לדוגמה. זה יהיה גלוי רק במשך 3 שורות. כל התוכן שאחריו יסתיר. זה נובע משיעור ה-lin clamping ב-Tailwind. < / ע >
< / div >
האלמנט p מסופק עם מחלקה 'line-clamp-1' כברירת מחדל. עם זאת, תוכן הטקסט באלמנט 'p' יהיה מוגבל לשורה אחת עבור ' sm ' נקודת שבירה, שתי שורות עבור ' md ' נקודת שבירה ושלוש שורות עבור ' lg ' נקודת שבירה.
תְפוּקָה
מהפלט, ברור שתכונת הקו-clamp של בלוק הטקסט משתנה ככל שגודל המסך משתנה:
הדגמנו את ההליך להצמדת טקסט למספר מסוים של שורות ב-Tailwind.
סיכום
מחלקת ה-line clamp ב-Tailwind מגבילה את תוכן הטקסט של אלמנט למספר השורות שצוין. המחלקה 'lin-clamp-{number}' משמשת כתחביר להצמדת הטקסט לשורות מוגבלות. ניתן להשתמש במחלקת מהדק הקו עם נקודות השבירה המוגדרות מראש וגרסאות המצב ב-Tailwind. מאמר זה סיפק את ההליך להצמדת הטקסט למספר מוגדר של שורות.