چگونه یک رشته بلند را داخل یک td یا div با اندازه ثابت قرار دهیم

معمولا در صفحات وب برای قرار دادن یک رشته از اجزای مختلفی مانند span – label – p – q – div – tabel(td) استفاده می شود . مثلا یک متن را داخل یک ستون از جدول قرار می دهند و جایی که آن ستون قرار داشته باشد آن متن بخوبی نمایش داده می شود .

نکته : در مثال های زیر جمله : “ناصر حاجلو نویسنده این مطلب است” و رشته “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 قابل استفاده است .

4 Responses to چگونه یک رشته بلند را داخل یک td یا div با اندازه ثابت قرار دهیم

  1. در حل حاضر word-wrap فقط در IE قابل استفاده است اما فایرفاکس خودش این کار را میکند!

  2. jamshid says:

    مطلب مفیدی بود، ممنون.
    راهی هم سراغ دارید تا در همه مرورگرها عملکرد یکسان داشته باشد؟

  3. مهدی says:

    نکته دوم : در حل حاضر word-wrap فقط در IE قابل استفاده است .

    One solution is to detect Firefox, and then insert <brtags at
    suitable intervals in your long strings.

  4. صالح says:

    عالی بود

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: