כתבתי אתר לנייד, תראו למשל את הדף הזה (בנייד):

http://srayasite.somee.com/procedures.htm

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

ציפיתי שבמקרה כזה המילה תרד לשורה הבאה, ויהיה מרווח בקצה השמאלי.

איך אני פותר את הבעיה הזו?

תודה :-)

זה בגלל שלאובייקטים מסוג <ul class=ulist> מוגדר מצד אחד width:100% ומצד שני padding:40px. היות שלפי התקן padding מתווסף לwidth ולא כלול בתוכו, נוצר לך אובייקט שהרוחב שלו הוא 100%+40px כלומר הוא רחב ב40 פיקסלים מרוחב המסך.

לדעתי, אפשר להוריד את ה width:100% מהכלל של ul. יש סיבה ספציפית שהוא נחוץ לך שם?

מה שתיאר הבחור מעליי נקרא box model (קרא על זה).

פתרון נוסף (שבאמת פותר את הבעיה ומתאים גם במקרים שבהם אתה כן צריך להגדיר רוחב) זה להגדיר box-sizing: border-box, היות וזה משהו די חדש שלא נתמך בצורה מלאה כדאי להשתמש גם ב- vendor prefixes כרגע.

בהצלחה.

רק שאין בזה שום צורך במקרה הזה. בגלל ש ul הוא אלמנט מסוג block, הוא ממילא מתרחב לכל רוחב האובייקט שמכיל אותו, והתוצאה תהיה זהה גם בלי width:100%. קצת מצחיק להגיד שמה ש"באמת" פותר את הבעיה זה להוסיף מאפיין נוסף רק כדי שלא יהיה צורך להסיר מאפיין מיותר.

בנוסף, גם אם כן צריכים להגדיר רוחב מאיזושהי סיבה, ובהנחה שמוכנים להשתמש בדברים חדשים,זה עדיין לא רעיון טוב לשנות את ה box-sizing. אם כבר, עדיף פשוט להגדיר calc, נגיד בצורה כזו:

width:calc(100% - 40px)