1 באוק׳ 2012

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

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

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



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

הבעיה : כותרת דינמית עם טקסט ארוך מאוד
<h1>this is very long long title with a lot of text this is very long long title with a lot of text this is very long long title with a lot of text </h1>
הפיתרון:
h1{
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
}

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

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