איך לעשות trim לשורה, ב CSS בלבד!

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

יש פתרון CSS נקי שתומך בבעיה!

ללא כל צורך התערבות ב JS. קיים property בשם text-overflow (לא להתבלבל זה לא overflow) ב CSS, ה proprty הזה יודע לקבל ערך בשם ellipsis. הערך מגדיר שבמידה ויהיה חריגה בטקסט במצב של overflow:hidden, במקום שהטקסט ייחתך ויראה לא יפה, הוא ייחתך ויהיה בסופו 3 נקודות. הגדרה נוספת ואחרונה, שצריך להגדיר שבמידה והטקסט ארוך מרוחב האלמנט שהוא נמצא בתוכו, שלא ישבור שורה ע”י שימוש ב white-space: nowrap.

הבעיה : כותרת דינמית עם טקסט ארוך מאוד

 

הפיתרון:

LIVE DEMO

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

ואם זה לא מספיק לכם ואתם מחפשים פתרון משלים גם לפסקאות עם מספר שורות,
אז הנה לינק של פתרון משלים ב JQuery.
http://dotdotdot.frebsite.nl/

על הכותב/עורך
קוראים לי אלעד שכטר, כיום עובד בחברת וואלה!, בתפקיד של ארכיטקט CSS. אוהב, אוכל ונושם CSS. לוקח את התחום הזה לקצה היכולות שלו.
  • כתיבת תגובה

    האימייל לא יוצג באתר. (*) שדות חובה מסומנים

    תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">