جلسه ی پنجاه و دوم خصوصیت Text-overflow در CSS

css, آموزش طراحی سایت ابوالفضل کلهری بدون نظر 31 مارس 2019 161 بازدید
خصوصیت Text-overflow در CSS

در جلسات پیش با خصوصیت های مختلف در زمینه ی Overflow آشنا شده اید. (برای دیدن آموزش Overflow در CSS کلیک کنید) در این جلسه می خواهیم با خصوصیت Text-overflow در CSS آشنا شویم. (برای دیدن آموزش CSS به زبان ساده کلیک کنید)

خصوصیت Text-overflow در CSS

همانطور که از نام این خصوصیت پیداس این خصوصیت ترکیبی از خصوصیت های Text و Overflow می باشد. عموما در این خصوصیت قصد ما این است که به کاربر بفهمانیم متن مورد نظر ما بیشتر از مقدار نمایش داده شده در مقابل او می باشد و باید برای خواندن کامل این مطلب به ادامه ی مطلب برود.

شرایط مختلف برای عمل کردن خصوصیت Text-overflow در CSS

برای اینکه خصوصیت Text-overflow به خوبی عمل کند لازم است که دو قطعه کد در کنار آن قرار گیرد. ابتدا باید بدانید که یکی از شروط اصلی برای سریز شدن این است که خصوصیت Display در عنصر ما بر روی حالت Block باشد.

شرط دوم این است که در میان عناصر ما فاصله نباشد و یا از قطعه کد white-space: nowrap; استفاده کنیم.

شرط سوم این است که از خصوصیت Overflow بر روی حالت Hidden استفاده کنیم. در صورتی که از این دو نمونه کد استفاده نشود خصوصیت Text-overflow عمل نخواهد کرد.

حالات مختلف خصوصیت Text-overflow در CSS

برای این خصوصیت دو حالت کلی وجود دارد که از آن ها استفاده می کنیم. این حالات عبارتند از:

  • clip
  • ellipsis

حالت clip

در این حالت از خصوصیت Text-overflow می خواهیم به کاربر نشان دهیم از هر جایی که متن تمام شد متن ما بریده شود. البته باید گفت این کار جالبی نیست. به نمونه کد زیر توجه کنید:

کد HTML:

<div class="box">
  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
</div>

کد CSS:

.box {
  width: 600px;
  height: 30px;
  font-size: 30px;
  color: #000;
  border: 3px solid #888;
  border-radius: 15px;
  margin: 0px 50px;
  padding: 10px;
  overflow: hidden;
  float: right;
  background-color:#a3d29c;
  white-space: nowrap;
  text-overflow: clip;
  }

خروجی کد بالا:

خصوصیت Text-overflow در CSS
g

حالت ellipsis

در این حالت ما به کاربر نشان می دهیم که جمله ما پس از تمام شدن در همان نقطه قطع نمی شود و بعد از یک سه نقطه ادامه دارد. این بهترین حالت برای نشان دادن ادامه دار بودن مطلب می باشد. به نمونه کد زیر دقت کنید:

کد HTML:

<div class="box">
  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
</div>

کد CSS:

.box {
  width: 600px;
  height: 30px;
  font-size: 30px;
  color: #000;
  border: 3px solid #888;
  border-radius: 15px;
  margin: 0px 50px;
  padding: 10px;
  overflow: hidden;
  float: right;
  background-color:#a3d29c;
  white-space: nowrap;
  text-overflow: ellipsis;
  }

خروجی کد بالا:

خصوصیت Text-overflow در CSS

یادتان باشد که از خصوصیت Text-overflow در CSS در تمامی مرورگر ها پشتیبانی می شود.

خلاصه مطلب:

  • عموما در این خصوصیت قصد ما این است که به کاربر بفهمانیم متن مورد نظر ما بیشتر از مقدار نمایش داده شده در مقابل او می باشد و باید برای خواندن کامل این مطلب به ادامه ی مطلب برود.
  • در این حالت از خصوصیت Text-overflow می خواهیم به کاربر نشان دهیم از هر جایی که متن تمام شد متن ما بریده شود.
  • در این حالت ما به کاربر نشان می دهیم که جمله ما پس از تمام شدن در همان نقطه قطع نمی شود و بعد از یک سه نقطه ادامه دارد.

احساس خود را درباره این مقاله بگویید 0 نظر

جلسه ی پنجاه و دوم خصوصیت Text-overflow در CSS
0 0
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

مقالات پیشنهادی
دیدگاه شما در رابطه با این مقاله چیست!؟

ارسال دیدگاه

  • ایمیل شما هیچگاه توسط کمیابی ها فاش نمی شود.
  • لطفا از پرسش تکراری خودداری کنید.
  • برای پشتیبانی محصولات و دریافت بهترین نتیجه از بخش تیکت استفاده کنید.
  • میانگین زمان پاسخ دهی به دیدگاه ها، حدود 1 ساعت می باشد.
  • ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.