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

خصوصیت 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 می خواهیم به کاربر نشان دهیم از هر جایی که متن تمام شد متن ما بریده شود.
  • در این حالت ما به کاربر نشان می دهیم که جمله ما پس از تمام شدن در همان نقطه قطع نمی شود و بعد از یک سه نقطه ادامه دارد.
ابوالفضل کلهری

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

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها