כיצד להגביל שורות טקסט עם CSS בלבד

הגבלת כמות הטקסט באלמנט היא דרישה נפוצה לעיצוב אתרים. לעתים קרובות תראה מאמר עם קטע בן שלוש או ארבע שורות עם כפתור המאפשר לך להרחיב את הטקסט המלא.

אתה יכול ליצור עיצוב זה באמצעות שילוב של CSS ו-JavaScript. אבל אתה יכול לעשות זאת גם באמצעות CSS בלבד. גלה שתי דרכים להגביל את הטקסט בתיבה וכיצד תוכל ליצור כפתור הרחבה דינמי באמצעות CSS בלבד.

טכניקת ה-Webkit

צור תיקיה ריקה וערוך בתוכה שני קבצים: index.html ו style.css. בתוך ה index.html קובץ, צור שלד HTML:

html>
<htmllang="he">
<רֹאשׁ>
<כותרת>מסמךכותרת>
<קישורrel="גיליון סגנונות"href="style.css">
רֹאשׁ>
<גוּף>
גוּף>
html>

קישור ב- סעיף, אל style.css קובץ, מבטיח שכל CSS שתוסיף לקובץ זה יחול על דף זה. לאחר מכן, הדבק את סימון ה-HTML הבא בתוך ה- מתייג ב index.html:

<סָעִיףמעמד="קבוצת כרטיסים">
<מאמרמעמד="כַּרְטִיס">
<h2>מאמר 1h2>
<עמעמד="טקסט חתוך">
 טקסט בן 300 מילים מגיע לכאן
ע>
<קֶלֶטסוּג="תיבת סימון"מעמד="expand-btn">
מאמר>
<מאמרמעמד="כַּרְטִיס">
<h2>סעיף 2h2>
<עמעמד="טקסט חתוך">
 טקסט בן 200 מילים נכנס לכאן
ע>





instagram viewer

<קֶלֶטסוּג="תיבת סימון"מעמד="expand-btn">
מאמר>
<מאמרמעמד="כַּרְטִיס">
<h2>מאמר 1h2>
<עמעמד="טקסט חתוך">
 טקסט בן 100 מילים נכנס לכאן
ע>
<קֶלֶטסוּג="תיבת סימון"מעמד="expand-btn">
מאמר>
סָעִיף>

המבנה של HTML זה פשוט, אך עדיין משתמש בו סימון סמנטי עבור נגישות. רכיב מדור מכיל שלושה רכיבי מאמר. כל מאמר כולל כותרת, פסקה ורכיב קלט. תשתמש ב-CSS כדי לסגנן כל קטע מאמר לכרטיס.

בינתיים, הדף שלך ייראה כך:

מהתמונה למעלה, אתה יכול לראות אורכים משתנים של טקסט בכל פסקה. 300 מילים בראשון, 200 מילים בשני, ו-100 בשלישית.

השלב הבא הוא להתחיל לעצב את הדף על ידי הוספת CSS ל- style.css קוֹבֶץ. התחל באיפוס הגבול על המסמך והענקת לגוף צבע רקע לבן:

*, *::לפני, *::לאחר {
גודל קופסא: תיבת גבול;
}
גוּף {
רקע כללי: #f3f3f3;
הצפה: מוּסתָר;
}

לאחר מכן, הפוך את האלמנט עם מחלקת ה-card-group למיכל רשת עם שלוש עמודות. כל מדור מאמר תופס עמודה:

.card-group {
לְהַצִיג: רֶשֶׁת;
עמודות-תבנית-רשת: חזור(3, 1fr);
פער: .5 רמ;
align-items: flex-start;
}

סגננו כל מאמר ככרטיס עם צבע רקע לבן וגבול שחור, מעט עגול:

.כַּרְטִיס {
רקע כללי: לבן;
ריפוד: 1rem;
גבול: 1פיקסליםמוצקשָׁחוֹר;
גבול-רדיוס: .25em;
}

לבסוף, הוסף כמה שוליים:

h2, ע {
שולים: 0;
}
h2 {
שוליים-תחתית: 1rem;
}

שמור את הקובץ ובדוק את הדפדפן שלך. הדף צריך להיראות בעמוד המוצג בתמונה למטה:

השלב הבא הוא לחתוך את מספר השורות עבור כל טקסט ל-3. הנה ה-CSS בשביל זה:

.cuttoff-text {
--max-lines: 3; 
הצפה: מוּסתָר;

לְהַצִיג: -webkit-box; 
-webkit-box-orient: אֲנָכִי;
-webkit-line-clamp: var(--max-lines);
}

התחל בהגדרה משתנה CSS, max-lines, עד 3 והסתרת תוכן עולה על גדותיו. לאחר מכן הגדר את התצוגה ל -webkit-box ומהדקים את הקו ל-3.

התמונה הבאה מציגה את התוצאה. כל קלף מציג אליפסה בשורה השלישית של הטקסט:

טכניקה זו יכולה להיות די מסובכת לביצוע. אם היית משמיט רכוש כלשהו אז הכל הולך להישבר. חיסרון נוסף הוא שאתה לא יכול להשתמש במאפיין תצוגה מלבד --webkit-box. לדוגמה, אולי תרצה השתמש ב-Grid או ב-Flexbox. מסיבות אלה, הטכניקה הבאה טובה יותר.

גישה גמישה יותר להגבלת מספר השורות בטקסט

טכניקה זו מאפשרת לך לעשות את אותו הדבר כמו גישת ה-webkit, עם אותן תוצאות. אבל ההבדל הגדול הוא שיש לך טונות של גמישות כי אתה קובע את הגובה בעצמך. בנוסף אתה יכול להשתמש בכל נכס תצוגה או בכל אפשרות סטיילינג שאתה מעדיף.

כדי להתחיל, החלף את בלוק ה-CSS עבור .cutoff-text עם זה:

.cuttoff-text {
--max-lines: 5;
--גובה קו: 1.4;
גוֹבַה: calc(var(--max-lines) * 1em * var(--גובה קו));
גובה קו: var(--גובה קו);
עמדה: קרוב משפחה;
}

הגדרת גובה קו חשובה כי אתה צריך לקחת אותו בחשבון בעת ​​קביעת הגובה שלך. כדי לקבל את הגובה, אתה מכפיל את גובה השורה בגודל הגופן שלך ובמספר השורות.

אנחנו מוסיפים מיקום: יחסית נכס כי אנחנו צריכים אותו כדי להוסיף את אפקט הדעיכה. הוסף את ה-CSS הבא כדי להשלים את האפקט:

.cuttoff-text::לפני {
תוֹכֶן: "";
עמדה: מוּחלָט;
גוֹבַה: calc(2em * var(--גובה קו));
רוֹחַב: 100%;
תַחתִית: 0;
אירועי מצביע: אף אחד;
רקע כללי: שיפוע ליניארי(לתַחתִית, שָׁקוּף, לבן);
}

ה-CSS שלמעלה מטשטש את שורת הטקסט האחרונה בכל כרטיס. אתה יכול להשיג אפקט דהייה באמצעות רקע כללי תכונה ושיפוע. אתה חייב להגדיר אירועי מצביע ל אף אחד כדי להבטיח שהאלמנט אינו ניתן לבחירה.

הנה התוצאה:

טכניקה זו השיגה את אותה תוצאה כמו הקודמת (בתוספת הטשטוש בסוף). אבל אתה מקבל יותר גמישות להשתמש בסוגים אחרים של פריסות ועיצובים.

הוספת לחצן הרחבה וכיווץ דינמי

הוספת כפתור הרחבה/כיווץ הופכת את הקלפים למציאותיים ואינטראקטיביים יותר. עם דפוס זה, אתה מרחיב את התוכן על ידי לחיצה על לְהַרְחִיב לחצן, שלאחריו הטקסט משתנה ל הִתמוֹטְטוּת. אז הטקסט של הכפתור עובר בין "הרחב" ל"כווץ" כשאתה לוחץ עליו. יתר על כן, שאר התוכן מוצג ומסתתר בכל מצב בהתאמה.

כבר הגדרת קֶלֶט אלמנט ב-HTML שלך. אלמנט זה ישמש ככפתור שלך. כדי לעצב קלט זה לכפתור, כלול את ה-CSS הבא בגיליון הסגנונות שלך:

.expand-btn {
מראה חיצוני: אף אחד;
גבול: 1פיקסליםמוצקשָׁחוֹר;
ריפוד: .5em;
גבול-רדיוס: .25em;
סַמָן: מַצבִּיעַ;
שוליים למעלה: 1rem;
}

כאשר אתה מרחף על הכפתור, אתה רוצה לשנות את צבע הרקע:

.expand-btn:לְרַחֵף {
צבע רקע: #ccc;
}

כעת ה-CSS להחלפת הטקסט כאשר הקלט מסומן:

.expand-btn::לפני {
תוֹכֶן: "לְהַרְחִיב"
}
.expand-btn:בָּדוּק::לפני {
תוֹכֶן: "הִתמוֹטְטוּת"
}

כעת כאשר אתה לוחץ על הכפתור/קלט, הטקסט עובר מ לְהַרְחִיב ל הִתמוֹטְטוּת. אבל התוכן עצמו לא יתרחב עדיין. כדי לגרום לזה לעשות זאת כשאתה לוחץ על הכפתור, הוסף את ה-CSS הבא:

.cuttoff-text:יש(+.expand-btn:בָּדוּק) {
גוֹבַה: אוטומטי;
}

דוגמה זו משתמשת ב- has() בורר CSS למיקוד האלמנט. עם הקוד הזה, אתה אומר שאם באזור הטקסט החיתוך יש כפתור הרחבה מסומן, גובה הכרטיס צריך להיות אוטומטי (מה שמרחיב אותו).

הנה התוצאה:

טיפים וטריקים אחרים של CSS ללמידה

מאמר זה הדגים שתי שיטות שונות להגבלת מספר השורות בתיבה באמצעות CSS. אפילו הוספנו כפתור להרחבה/כיווץ של התוכן מבלי לכתוב שורה אחת של JavaScript.

אבל יש עוד המון עצות וטריקים ב-CSS. טיפים אלה מציעים לך דרך יצירתית להשיג את הפריסות הרצויות שלך מבלי לפגוע בביצועים, בקריאות או בנגישות.