שלוש נקודות...

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

רש"י:

לאור ריבוי מקרי המובייל, התבקשתי לחתוך את שורת ההמלצות של הWIDGET מה שקורי בלעז truncation. נראה פשוט אבל מנסיוני יש כמה בעיות קליניות. 

האחת: איפה לחתוך את הטקסט

השניה: איפה ואיך להוסיף את ה ellipsis הסיומת (כמו שלוש נקודות...)

אפשר לבצע זאת בכמה דרכים, רובן מורכבות. לכן אביא את הדרך הפשוטה והמהירה.

שיטת ה CSS : השיטה הקלה והבטוחה 

CSS3 מכיל יכולת מופלאה לחתוך את הטקסט לבד בעזרת מילת הקסם text-overflow:ellipsis

p {
      white-space: nowrap;
      width: 100%;                   /* IE6 needs any width */
      overflow: hidden;              /* "overflow" value must be different from "visible" */ 

      -o-text-overflow: ellipsis;    /* Opera 9-10 */
      text-overflow:    ellipsis;    /* IE, WebKit (Safari, Chrome), Opera 11 */
   }

שיטה זאת מבטיחה חיתוך מדוייק ומותאם לרוחב התא בו הטקסט נמצא. אני ממליץ בפה מלא. 

ברם, משום מה Firefox נכון לשניות כתיבת פוסט זה, איננה תומכת בפיטצ'ר נפלא זה - גם בגרסת 4 החדשה. מוזר מאחר ובד"כ היא מקדימה את זמנה. 

קיים פתרון, אך מאחר ואני כותב ווידג'טים הוא איננו רלוונטי לגבי, וזה קריאה לקובץ XML הנקרא XUL שזאת שפה המובנת לפיירפוקס וחברותיה. מאחר ואני 3RD PARTY אינני יכול להשתמש בזה מבחינת הרשאות. אך אם הייתי משתמש אם הייתי כותב אתר, לדוגמא.

לינק המסביר נושא זה טוב ממני

הערת פרמה: אני חייב לזוז אבל מצאתי דרך נהדרת לעשות את זה בקלות.