איך למנוע מילים יתומות בכותרות בעברית בעזרת text-wrap ב-CSS

אני רואה את הבעיה הזו כמעט בכל אתר שאני בודק. מעצב משקיע שעות בבחירת פונט עברי מדויק, מגדיר משקלים וריווחים, אבל ברגע שהאתר עולה לרשת ונפתח במסך נייד — הכותרת הראשית נשברת בצורה נוראית. שלוש מילים עומדות בשורה הראשונה, ומילה אחת קטנה נשארת לבד בשורה השנייה. המצב הזה נקרא טיפוגרפית "מילה יתומה" (Orphan Word). בעבר נאלצנו להשתמש בתגיות <br> קשיחות, ברווחים בלתי-שבירים ( ), או בספריות JavaScript כבדות שחישבו את רוחב הטקסט בזמן אמת. ב-2026, יש לנו פתרון נייטיב, נקי ומהיר ישירות ב-CSS.

הגדרה · מילה יתומה (Orphan)

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

הבעיה הטיפוגרפית הייחודית של העברית

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

כשמעצבים אתר רספונסיבי, רוחב המסך משתנה מ-375 פיקסלים בסמארטפון ועד 2560 פיקסלים במסך מחשב רחב. אם נכניס מעבר שורה ידני עם תגית <br>, האתר אולי ייראה מצוין במסך של המעצב ברמת גן, אבל יישבר בצורה מוזרה במסך מתקפל או בטאבלט.

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

הפתרון: text-wrap: balance לכותרות

המאפיין text-wrap: balance מבקש מהדפדפן לבצע חישוב חכם. במקום למלא את השורה הראשונה עד הסוף ואז להפיל את מה שנשאר למטה, הדפדפן מחשב את המספר המינימלי של שורות ומאזן את אורך השורות ביניהן.

זה עובד מדהים.

h1, h2, h3 {
  text-wrap: balance;
}

כאשר מפעילים את ההגדרה הזו על כותרת, הדפדפן מודד את הטקסט ומחלק אותו כך ששתי השורות יהיו באורך כמעט שווה. אין צורך לחשב פיקסלים, אין צורך ב-media queries מורכבים, ואין צורך בקוד JS שעולה בביצועים.

יש רק מגבלה אחת שחשוב להכיר: הדפדפן מגביל את החישוב הזה עד 4 שורות טקסט כדי למנוע ירידה בביצועי הרינדור. לכן, balance מיועד בעיקר לכותרות ולא לפסקאות ארוכות.

מה עושים עם פסקאות? הכירו את text-wrap: pretty

מה קורה כשרוצים למנוע מילה יתומה בסוף פסקה של 5 שורות? כאן נכנס לתמונה text-wrap: pretty.

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

p {
  text-wrap: pretty;
}

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

איך יישמתי את זה בפרויקטים של הסטודיו

בסטודיו שלנו בתל אביב, עברנו לשימוש מלא ב-text-wrap בבלוגים ובאתרי תדמית. באחד הפרויקטים האחרונים, עמוד הבית כלל כותרת ראשית בת 7 מילים בעברית. לפני השימוש ב-balance, הכותרת נשברה בטלפונים ניידים ל-6 מילים בשורה הראשונה ומילה אחת בודדת בשורה השנייה.

הוספת text-wrap: balance שינתה את הפריסה מיידית: 4 מילים בשורה הראשונה, ו-3 מילים בשורה השנייה. היררכיה נקייה, מראה פרופורציונלי, אפס מאמץ.

💡

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

סיכום

שמירה על היררכיה ויזואלית ומניעת מילים יתומות הן כבר לא משימות שמצריכות פשרות או קוד מפותל. הכלים הטיפוגרפיים שנכנסו ל-CSS מאפשרים לנו ליצור אתרים בעברית שנראים מצוין בכל מסך ובכל רוחב. הוסיפו את text-wrap: balance לכותרות ואת text-wrap: pretty לפסקאות שלכם כבר היום.