שבירת שורה בטקסט במובייל –
פתרון חכם ללא שכפול תוכן
אחת הבעיות הנפוצות בעיצוב אתרים היא התאמת הטקסט לתצוגת מובייל בצורה נכונה.
פעמים רבות, מבוני אתרים בוחרים לשכפל את הטקסט – גרסה אחת שתוסתר בנייד וגרסה נוספת שתוסתר בדסקטופ. אך שיטה זו מכבידה על האתר ומסבכת את התחזוקה. למעשה, ניתן לפתור את הבעיה בפשטות בעזרת שבירת שורה במובייל באמצעות קוד CSS פשוט, שמאפשר לייעל את האתר ולהפוך אותו לרספונסיבי ואפקטיבי יותר.
נגיד שיש לנו טקסט:
שלחו לנו מייל או התקשרו 0545-716-169
ואנחנו רוצים שרק בנייד מספר טלפון יופיע בשורה נפרדת
נעבור לעורך טקסט ושם נוסיף במקום שאנו מעוניינים לשבור את הטקסט בנייד (במקרה שלנו לפני מס. טלפון)
class="mobile-break"
שלחו לנו מייל או התקשרו <a class="mobile-break" style="color: #ffffff;" href="tel:972502733906">050-273-3906</a>
נעבור ללשונית מתקדם ושם נרשום css:
@media only screen and (max-width: 768px) {
.mobile-break::before { content: "\A"; /* הוספת שבירת שורה */
white-space: pre; /* שמירה על הרווחים והשבירה */
}
}
הסבר:
- הגדרת class: הוספתי את המחלקה
mobile-breakלקישור של מספר הטלפון. - CSS מותאם למובייל: עם ה-
@media, הקוד יחול רק במסכים עד רוחב של 768px (מתאים לניידים). - "content: \A": מוסיף שבירת שורה לפני המספר.
- white-space: pre: שומר על השבירה כך שתוצג בפועל.
עם הקוד הזה, שבירת השורה תופיע רק במובייל.
מה הבדל בין "content: \A" לבין br?
ההבדל בין <br> לבין "content: \A" טמון במיקום השימוש ובמטרות שלהם:
1. שימוש ב-HTML (<br>):
<br>הוא תגית HTML שמוסיפה שבירת שורה ישירות בתוך תוכן HTML.- הוא נועד לשימוש ישיר בעורך HTML כאשר רוצים ליצור מעבר שורה.
- לדוגמה
שלחו לנו מייל או התקשרו <br> 050-273-3906
- שימוש טיפוסי: טקסטים שבהם צריך לשלוט ידנית על הפורמט, כמו בשירה, כתובות או פסקאות קצרות.
. שימוש ב-CSS ("content: \A"):
"content: \A"הוא חלק מ-CSS, ומשתמשים בו בדרך כלל כאשר יש צורך להוסיף תוכן באופן דינמי, באמצעות פסאודו-אלמנטים כמו::beforeאו::after.- היתרון: מאפשר לשמור על הפרדה בין תוכן (HTML) לבין עיצוב (CSS).
- חיסרון: כדי שהשורה החדשה תוצג, יש צורך להגדיר גם
white-space: pre;אוpre-line.
לדוגמה:
.mobile-break::before {
content: "\A";
white-space: pre;
}
אפשרות נוספת לקוד css:
@media screen and (max-width: 768px) {
.mobile-break {
display: block;
}
}
מה הוא עושה?
- הקוד הזה הופך אלמנט מסוים (כמו
<span>או<div>) לאלמנט בלוק במובייל. - אלמנט מסוג בלוק (block) תופס שורה שלמה, ולכן כל מה שמגיע אחריו יעבור לשורה חדשה אוטומטית.
מתי להשתמש?
- כשכבר יש לכם אלמנט קיים (למשל
<span>או<div>), ואתם רוצים שהוא יעבור לשורה חדשה רק במובייל.
לעומת הקוד השני
@media screen and (max-width: 768px) {
.mobile-break::before {
content: "\A";
white-space: pre;
}
}
מה הוא עושה?
- הקוד הזה יוצר שבירת שורה מלאכותית (כאילו לחצת על "Enter") באמצעות CSS בלבד.
- הפסאודו-אלמנט
::beforeיוצר תוכן חדש לפני האלמנט שבו משתמשים ב-.mobile-break. - השורה החדשה נוצרת בזכות ה-
\A, שמשמש כשבירת שורה בקוד CSS. ה-white-space: preמבטיח שהשבירה הזו תעבוד בפועל.
מתי להשתמש?
- כשאתם רוצים להוסיף שבירת שורה בעיצוב בלבד, מבלי לשנות את הקוד המקורי ב-HTML (למשל, בלי להוסיף
<br>).
ההבדלים המרכזיים:
הקוד הראשון (
display: block):- פועל רק על אלמנטים קיימים (כמו
<span>או<div>). - גורם לאלמנט להופיע בשורה נפרדת על ידי שינוי הסוג שלו ל-
block.
- פועל רק על אלמנטים קיימים (כמו
הקוד השני (
content: "\A"):- יוצר שבירת שורה באמצעות CSS בלבד (בלי לשנות HTML).
- טוב לשימוש כשלא רוצים לשנות את ה-HTML עצמו, אלא רק להוסיף שבירה לצורכי עיצוב.
מתי להשתמש בכל אחד?
- אם יש לך שליטה על ה-HTML, והאלמנטים כבר קיימים, השתמשי ב-
display: block. - אם את לא רוצה או לא יכולה לשנות את ה-HTML, אבל עדיין צריכה שבירת שורה, השתמשי ב-
content: "\A".
