وقت بخیر 🌸

در این پست قصد داریم به معرفی یک ویژگی جدید بپردازیم ☘️

☘️text-overflow

این ویژگی زمانی مورد استفاده قرار میگیره که یک‌ متن از نگه دارنده اش سر ریز کند و ما بخواهیم کاربر را از این عمل اگاه کنیم 🌷

یک‌ متن در حالتی از نگه دارنده خود سر ریز میکند که ویژگی white-space برابر با مقدار nowrap باشد (این ویژگی را در اینده برسی خواهیم کرد)

و یا متنی داشته باشیم که هیچ فاصله ای بین کلمات اون متن نباشد 🌷


نکته 🔍 : دقت داشته باشید برای این که این ویژگی کار کند باید از ویژگی دیگری به نام overflow با مقدار hidden هم استفاده بکنیم (این ویژگی رو در اینده برسی خواهیم کرد) 🌷


فرض کنید در سند html این ساختار رو داریم :

<div>
frozencodingfrozencodingfrozen
</div>

الان فرض میگیریم این متن از نگه دارنده خود که div باشد سر ریز کرده 🌷

------------------------------------------------
| |
| frozencodingfrozencodingfroz
| |
------------------------------------------------

اینجوری مثلا از نگه دارنده خودش سر ریز کرده 🌷

این ویژگی مقادیر زیر رو اختیار میکنه:

☘️clip
این مقدار مقدار پیش فرض است و متن سر ریز شده را از جایی که سر ریز کرده برش میدهد و متن داخل نگه دارنده را نشان میده 🌷

☘️ellipsis
این ویژگی هم دقیقا مثل ویژگی بالا عمل میکنه با این تفاوت که در اخر متن یک سه نقطه (...) قرار میده تا به نوعی کاربر بفهمه که این متن ادامه داره و برش خورده 🌷

☘️inherit
این ویژگی رو هم بلدید 🌷


پس در css :

div{
overflow : hidden;
text-overflow : clip;
}

با این ویژگی ها خروجی به شکل زیر تغییر میکنه :


------------------------------------------------
| |
| frozencodingfrozencodingf |
| |
------------------------------------------------


اگر css رو به شکل زیر تغییر بدیم :


div{
overflow : hidden;
text-overflow : ellipsis;
}

در خروجی خواهیم داشت :


------------------------------------------------
| |
| frozencodingfrozencoding... |
| |
------------------------------------------------



برای درک بهتر این موارد حتما ویدیو مربوطه رو مشاهده کنید 🌷

👁‍🗨➖➖➖➖➖➖➖➖➖➖➖👁‍🗨
#css #css3 #learn_css #text_overflow

#آموزش #آموزش_css #متن_ها
👁‍🗨➖➖➖➖➖➖➖➖➖➖➖👁‍🗨



شاد و موفق و پیروز باشید 🌸



☘️Join Channel :👇
{
@frozencoding_channe
}

اینم ویدیو عملی تمرین بالا 🌺🌸



👁‍🗨➖➖➖➖➖➖➖➖➖➖➖👁‍🗨
#css #css3 #learn_css #text_overflow

#آموزش #آموزش_css #متن_ها
👁‍🗨➖➖➖➖➖➖➖➖➖➖➖👁‍🗨


شاد و موفق و پیروز باشید 🌸



☘️Join Channel :👇
{
@frozencoding_channel
}