כיצד לעטוף טקסט בשורה חדשה ב- CSS

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

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

כיצד פועלת גלישת טקסט של CSS

CSS מטפל במילים ארוכות מתוחות באמצעות המובנה עטיפת מילה אוֹ גלישת גלישה תכונה.

היא בטוחה האפליקציה המחתרת של אמזון

עם זאת, כאשר הדפדפנים אינם נשלטים, מטפלים בטקסטים כה ארוכים כברירת מחדל. הם לא יעטפו מילים ארוכות עד שיקבלו את ההנחיה לעשות זאת.

קשור: מה שאתה צריך לדעת על DOM

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

פריצת מילה : זהו תחביר ה- CSS האמיתי שאומר לדפדפן לעטוף טקסט ארוך לשורה חדשה.
נוֹרמָלִי : היא שוברת כל מילה בנקודות ההפרדה הרגילות בתוך DOM. אין לזה השפעה על מיתרים ארוכים.
התחלתי : זוהי הדרך של דפדפן ברירת המחדל לטפל במחרוזות. כמו נוֹרמָלִי תחביר, זה לא שובר מילים ארוכות.
לָרֶשֶׁת : הוא אומר לאלמנט הילד לרשת את רכוש האב. אבל זה עדיין לא עובד עם טקסטים ארוכים, למעט שאתה מיישם פריצת מילה לאלמנט האב.

כיצד לעטוף מילים ארוכות באמצעות גלישת Word של CSS

העברת מילים לשורה חדשה עם CSS היא קלה ואינה דורשת שינויי CSS מסורבלים כדי לעבוד.

למשל, הארוך h2 הטקסט בתוך מיכל הטקסט בתמונה לדוגמה למטה חוצה את קו הגבול:

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

HTML :

  
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above

CSS :

.wrap-it{  
word-wrap: break-word;  
}

לאחר עטיפת הארוך h2 טקסט בתמונה לדוגמה, הנה הפלט:

זהו זה! כעת אתה יודע כיצד לעטוף מילים בשורה חדשה בתוך DOM שלך באמצעות CSS.

כיצד לחבר טלפון למחשב נייד

קשור: כיצד למקד לחלק מדף אינטרנט באמצעות CSS Selectors

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

להשתמש גלישת גלישה במקום זאת, פשוט החלף עטיפת מילה עם זה.

חשוב לעטוף מילים בדף אינטרנט

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

לכן יש צורך בהחלת עטיפת טקסט על קטע כזה כדי לשמור על ה- DOM שלם.

מתג נינטנדו לא יתחבר לאינטרנט

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל כיצד להשתמש בשאילתות מדיה ב- HTML וב- CSS ליצירת אתרים רספונסיביים

רוצה לגרום לאתר שלך להראות מדהים במכשירים ניידים? הגיע הזמן ללמוד כיצד להשתמש בשאילתות מדיה ב- CSS.

קרא הבא נושאים קשורים

תִכנוּת
CSS
מודל אובייקט מסמכים

על הסופר אידיסו אומיסולה(פורסמו 94 מאמרים)

Idowu נלהב מכל דבר חכם וטכנולוגי. בזמנו הפנוי הוא משתעשע בקידוד ועובר ללוח השחמט כשהוא משועמם, אבל הוא גם אוהב להיפרד מדי פעם מהשגרה. התשוקה שלו להראות לאנשים את הדרך לטכנולוגיה המודרנית מניעה אותו לכתוב יותר.

עוד מאת Idowu Omisola

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחצו כאן להרשמה