حمیدرضا سلیمیان

بلاگ شخصی حمیدرضا سلیمیان

دسته بندی مقالات
باهم در شبکه های اجتماعی !

یک ریزه کاری جالب در css : سرریزی متن یا text-overflow

یک ریزه کاری جالب در css : سرریزی متن یا text-overflow

شاید براتون اتفاق افتاده باشه که یه متن طولانی داخل یه باکس باعث بزرگ شدن طولی یا عرضی  بدی بشه   خیلی مواقع هم از دستتون در میره و اصلا متوجهش نمیشین چون انتظار متن طولانی رو ندارین و مثلا سر یه عنوان طولانی ظاهر به کلی بهم میریزه.

روش سابق !

خوب  شاید یه کار معمول که میکردید این بوده که با استفاده از زبان سمت سرور خودتون مثلا php  اون متن رو محدود می می کردید . مشکل اینجا بود که باید بر اساس کلمه محدود می کردین نه کارکتر چون  بیشتر موقه ها آخرین کلمه رو ناقص می نوشت و ظاهری جالب بهش نمی داد .

روش ساده !

روش ساده  ترش استفاده از چند تا ویژگی css  هست که متن  های طولانی رو کوتاه می کنه  و آخرش سه تا نقطه می زاره . نمونه زیرو ببینید

متن یا عنوان طولانی که باعث به همریختگی می شود
متن یا عنوان طولانی که باعث به همریختگی می شود

کد روش سمت راست :

.text-overflow
{
	
	overflow:hidden;
	text-overflow : ellipsis;
	white-space:Nowrap;

}

 

 

ویژگی این سه ویژگی !

خوب حالا ببینیم این سه تا ویژگی ماهیتشون چیه و دقیقا چکار می کنن :

text-overflow

نحوه نمایش متن مواقع سر ریزی دارای دو مقدار استاندارد clip و ellipsis

  • eclip : مقدار پیش فرض . حالت عادی ! در صورتی که overflow برابر با visible  باشد متن نمایشداده می شود (سر ریز می کند) و اگر hidden  باشد مخفی می کند
  • Ellipsis : در صورت سر ریزی در انتهای متن با توجه به مقدار rtl  عبارت  "..." (سه نقطه) را قرار میدهد

البته این ویژگی مقدار استرینگ هم قبول میکنه به طوری خودمون مشخص کنیم که آخر عبارت بجای سه نقطه که کارکتری چاپ بشه ولی تا این لحظه که من این پست رو میزارم فقط فایر فاکس ازش پشتیبانی می کنه

white-space

  • pre  : محافظ فواصل ! یعنی چی ؟ در حالت عادی اگر در متن هر چند تا  اسپیس هم بخوره یکی حساب میشه (حالت تک فاصله)ولی در این حالت به همان تعداد اسپیس  و یا تب فاصله می خوره . تک خطی ! یعنی چی ؟ در حالت عادی اگر متن در اون باکس جا نشه به خط بعدی منتقل می شه(چند خطی) ولی در این حالت در همان خط می مونه و ادامه پیدا میکنه
  • Nowrap  : حالت تک فاصله و تک خطی
  • pre-wrap : حالت محافظ فواصل و چند خطی
  • Normal : حالت پیش فرض : تک فاصله و چند خطی

 

 

Overflow

نحوه نمایش محتوا وقتی محتوا  از باکس سر ریز می شود

  • Visible حالت عادی . محتوا نمایش داده می شود . یا باکس کشیده می شود یا در صورت  تعریف اندازی مشخص برای باکس محتوا سر ریز می شود
  • Hidden  محتوا سر ریز شه مخفی می شود
  • Scrollباکس محتوا اسکرول می خورد چه در صورت سر ریزی و چه حالت عادی
  • Auto در صورت سرریزی محتوا  باکس اسکرول می خورد (این کاربردی تر از بالاییست !)

 

 

رعایت یک نکته کوچیک

در مواقعی که از این ویژگی استفاده می کنید پیشنهاد می کنم  کل محتوا رو در attribute  هایی مثل title  قرار بدید که کاربرتون بتونه با hover  کردن روی اون محتوای سر ریز شده (و احتمالا مخفی شده) ، کل محتوا رو ببینه .

 

 

منابع

 

نام
ایمیل
متن نظر
عبارت داخل تصویر
 
بابک
۱۳۹۴/۱۱/۰۶ ۱۲:۵۱
بسیار عالی بود حمید جان شفاف و صریح موفق باشی