چگونه یک رشته بلند را داخل یک td یا div با اندازه ثابت قرار دهیم
December 22, 2008 4 Comments
نکته : در مثال های زیر جمله : “ناصر حاجلو نویسنده این مطلب است” و رشته “aVeryVeryLongStringForTestaString” را در نظر بگیرید .
حالا حالتی را فرض کنید که رشته شما خیلی بلند باشد . در آن صورت متن شما شکسته شده و به خط بعد می رود اگر بخواهید متن را در همان خط نگه دارید می توانید از دستور
white-space : nowrap;
در css استفاده کنید،اگر این کار را نکنید متن شما شکسته شده و به خط بعد می رود .اما حالا بجای اینکه یک جمله یا متن را در نظر بگیرید یک رشته پیوسته را در نظر بگیرید ( مثل رشته اشاره شده در بالا ) اگر این رشته را در یک td یا div قرار بدهید حتی اگر width ( عرض ) آن را مشخص کرده باشید بدون توجه به مقدار عرض ،div یا td را بزرگ کرده و رشته را در آن نمایش می دهد . حتی اگر از whithe-space-pre هم برای شکستن متن و جا شدن آن در div خودتان استفاده کنید . باز هم div یا td شما بزرگ می شود و متن بطور کامل در آن جا می شود .
حالا اگر بخواهید این رشته به هم پیوسته را بشکنید و بعد از رسیدن به عرض مشخص شده به خط بعد ببرید باید از style زیر استفاده کنید .
word-wrap: break-word;
با این کار رشته شما هر چیزی که باشد پس از رسیدن به عرض مشخص شده در div که دربرگیرنده این رشته است – رشته شکسته شده – و به خط بعد می رود .
نکته اول : ( width ) عرض div یا td یا هر container دیگری باید حتما static باشد ( مثلا 200px ) و شما نمی توانید از این حالت درمقیاس درصد استفاده کنید . ( برای حل این مشکل من از دو div تو در تو استفاده می کنم )
نکته دوم : در حل حاضر word-wrap فقط در IE قابل استفاده است .
در حل حاضر word-wrap فقط در IE قابل استفاده است اما فایرفاکس خودش این کار را میکند!
مطلب مفیدی بود، ممنون.
راهی هم سراغ دارید تا در همه مرورگرها عملکرد یکسان داشته باشد؟
One solution is to detect Firefox, and then insert <brtags at
suitable intervals in your long strings.
عالی بود