این فصل رو به یادگیری یک سری از خاصیت های پیشرفته تر متن اختصاص میدیم.
سرفصلهای پست
انواع خاصیت های پیشرفته متن
این خاصیت ها عبارتند از:
- text-overflow
- word-wrap
- word-break
- writing-mode
تو بخش بعد، هر کدوم از این خاصیت ها رو با هم بررسی میکنیم.
کاربرد انواع خاصیت های پیشرفته متن
خاصیت text-overflow
این خاصیت، مشخص میکنه که یه محتوا تحت تاثیر دستور overflow:hidden، چطور باید به کاربر نمایش داده بشه.
برای مطالعه بیشتر در مورد خاصیت overflow، میتونین به مقاله overflow در CSS میزفا مراجعه کنین.
قبل از استفاده کردن از این خاصیت، باید دو دستور زیر رو در عنصری که میخوایم روی اون خاصیت text-overflow رو اعمال کنیم، داشته باشیم:
- overflow: hidden
- white-space: nowrap
این خاصیت میتونه دو مقدار متفاوت رو قبول کنه:
- مقدار clip: مقدار پیش فرض خاصیت. دستور text-overflow: clip و overflow: hidden هیچ تفاوتی با هم ندارن.
- مقدار ellipsis: این مقدار، به ادامه نا تمام عبارت، ( … ) اضافه میکنه.
برای بهتر متوجه شدن، مثال زیر رو ببینین:
<div> سلام به همگی! امروز تو میزفا با آموزش CSS در خدمتتون هستیم! </div>
*{ direction: rtl; font-family: iransansweb; } div{ width:200px; white-space: nowrap; overflow: hidden; border: 1px solid black; padding:10px; text-overflow: ellipsis; }
نتیجه کد رو به شکل زیر میبینیم:
نکته: عنصر حامل محتوا، حتما باید دارای ویژگی block یا inline-block باشه. چرا که فقط این نوع از عناصر عرض قبول میکنن. برای مطالعه بیشتر میتونین به مقاله مفهوم inline و block در CSS میزفا مراجعه کنین.
خاصیت word-wrap
کاربرد این خاصیت، اینه که اجازه نمیده کلمات و جملات از محدوده عنصر حامل بیرون بزنن و اون ها رو میشکنه.
این خاصیت، دو مقدار زیر رو قبول میکنه:
- normal: حالت پیش فرض. کلمات بلند رو نمیشکونه.
- break-word: کلمات بلند رو در صورت بیرون زدن از محدوده میشکونه.
برای درک بهتر این خاصیت، به مثال زیر توجه کنین:
<div class="normal"> یکی از مهم ترین مسائلی که یک برنامه نویس باید بهش توجه کنه، توانایی سرچ کردن و حل مشکلاته. به جرات میشه گفت که توانایی حل مشکلات، اهمیت خیییییلییییییییییییییییییییییییییییییی بالاتری از توانایی برنامه نویسی و مهارت تو فهم الگوریتم های مربوط به اون داره. </div> <div class="break-word"> یکی از مهم ترین مسائلی که یک برنامه نویس باید بهش توجه کنه، توانایی سرچ کردن و حل مشکلاته. به جرات میشه گفت که توانایی حل مشکلات، اهمیت خیییییلییییییییییییییییییییییییییییییی بالاتری از توانایی برنامه نویسی و مهارت تو فهم الگوریتم های مربوط به اون داره. </div>
*{ direction: rtl; font-family: iransansweb; } div{ width:200px; border:1px solid black; margin:10px; } div.normal{ word-wrap: normal; } div.break-word{ word-wrap: break-word; }
نتیجه کد رو به فرم زیر مشاهده میکنیم:
خاصیت word-break
این خاصیت، مشابه خاصیت word-wrap، کلمات رو میشکونه. اما کاربردش با توجه به مقادیری که قبول میکنه، متفاوت تره:
- keep-all: مقدار پیش فرض. کاملا به شکل معمولی عمل میکنه.
- break-all: کلمات رو تا انتهای مرز های محتوا ادامه می ده و سپس اون ها رو میشکونه.
برای درک بهتر مسئله، به مثال زیر توجه کنین:
<div class="keep-all"> یکی از مهم ترین مسائلی که یک برنامه نویس باید بهش توجه کنه، توانایی سرچ کردن و حل مشکلاته. به جرات میشه گفت که توانایی حل مشکلات، اهمیت خیلی بالاتری از توانایی برنامه نویسی و مهارت تو فهم الگوریتم های مربوط به اون داره. </div> <div class="break-all"> یکی از مهم ترین مسائلی که یک برنامه نویس باید بهش توجه کنه، توانایی سرچ کردن و حل مشکلاته. به جرات میشه گفت که توانایی حل مشکلات، اهمیت خیلی بالاتری از توانایی برنامه نویسی و مهارت تو فهم الگوریتم های مربوط به اون داره. </div>
*{ direction: rtl; font-family: iransansweb; } div{ width:200px; border:1px solid black; margin:10px; } div.keep-all{ word-break:keep-all; } div.break-all{ word-break:break-all; }
و نتیجه رو به شکل زیر مشاهده خواهیم کرد:
اگه جایی از مطالب براتون مبهم بود، حتما در قسمت نظرات بپرسین. من و بقیه اعضای تیم میزفا هواتون رو داریم 🙂
خاصیت writing-mode
این خاصیت، از خاصیت های مهمی هست که بهمون توانایی نوشتن محتوا، در راستای عمودی و افقی رو میده.
مقادیر مختلفی رو میتونه قبول کنه، اما در اینجا سه تا از مهم ترین مقادیر رو بررسی میکنیم:
- horizontal-tb: مقدار پیش فرض. محتوا رو به صورت افقی و طبیعی مینویسه.
- vertical-rl: محتوا رو به صورت عمودی مینویسه، و خط های بعدی محتوا رو به سمت چپ خط قبل هدایت میکنه
- vertical-lr: محتوا رو به صورت عمودی مینویسه، اما بر خلاف vertical-rl، خط های بعدی محتوا رو به سمت راست خط قبل هدایت میکنه.
برای درک بهتر مسئله، به مثال زیر توجه کنین:
<p class="horizontal-tb">سلام <br> به همگی!</p> <p class="vertical-rl">سلام <br> به همگی!</p> <p class="vertical-lr">سلام <br> به همگی!</p>
*{ direction: rtl; font-family: iransansweb; } p{ margin:50px; } p.horizontal-tb{ writing-mode: horizontal-tb; } p.vertical-rl{ writing-mode: vertical-rl; } p.vertical-lr{ writing-mode: vertical-lr; }
نتیجه کد از آموزش طراحی وب سایت به شکل زیر خواهد بود:
نکته: همونطور که تو این بخش دیدین، به جای متن، گفتیم محتوا! توسط این خاصیت میتونیم محتوایی مثل تگ های img و غیره رو هم به صورت عمودی پشت هم بچینیم. ولی این راه توصیه نمیشه، چون قابلیت های کمی رو در اختیارمون میزاره. بهترین راه استفاده از روش های طبقه بندی مختلف در CSS هست.
پایان ترم
[box type=”info” class=”question-from-users” width=””]سوال:
به کد های زیر توجه کنین:
<span>One of the most important things today, is to pay attention to whatever is polluting our beautiful planet.</span>
span{ width:30%; overflow:hidden; padding:10px; background-color:indianred; color:white; white-space: nowrap; text-overflow: ellipsis; }
در کد بالا مشکلی وجود داره که اجازه نمیده بتونیم از دستور text-overflow: hidden به درستی استفاده کنیم.
اون مشکل چیه؟ و چطور حل میشه؟
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبتنام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله از آموزش سی اس اس ، به بررسی یک سری از خاصیت های پیشرفته متن پرداختیم و اون ها رو یاد گرفتیم.
خاصیت هایی که یاد گرفتیم، عبارت بودن از:
- text-overflow: محتوای عنصر رو، در صورتی که بخواد بیشتر از حد بشه، به ( … ) منتهی میکنه.
- word-wrap: محتوای عنصر رو، در صورتی که بخواد بیشتر از حد بشه، به خطوط بعدی میشکنه.
- word-break: محتوای عنصر رو، در صورتی که بخواد بیشتر از حد بشه، به خطوط بعدی میشکنه (تفاوتش با word-wrap در اینه که محتوا رو تا انتهای مرز های عنصر ادامه میده و بعد میشکنه)
- writing-mode: جهت نوشته شدن محتوا به صورت عمودی و افقی رو مشخص میکنه.
خب، این فصل هم به سر رسید 🙂
تو این فصل کوتاه، یاد گرفتیم که چطور کلمات بیش از حد بلند رو تو حالت های مختلف بشکونیم، چطوری محتوا رو به صورت عمودی بنویسیم و چطوری یه متن بلند رو به صورت خلاصه نشون بدیم.
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزشها دارین، خیلی خیلی خوشحال میشیم که اون رو در بخش دیدگاههای پایگاه دانش میزفا ارسال کنین.
مدیر محتوا: علی اسماعیلی
7 پاسخ
تگ span تگ inline هست و چون تگ های inline خاصیت width رو قبول نمیکنه پس میایم بهش display: block; میدیم
سلام متین، تشکر ازت درسته 🙂
ایراد دیده نشد
کد داره اعمال میشه
بدون مشکل هست به نظر من
ممنون مهدی. این کوییز قرار بود یه مشکل داشته باشه که الان مشکل دارش کردیم 🙂
حالا یه بررسی کن ببین مشکلش رو پیدا میکنی؟
سلام
بازم داره درست عمل میکنه
چون از span استفاده شده باید display: block رو حتما استفاده کنیم.
فکر کنم قبلا div بود که مشکلی نداشت سوال
سلام مهدی جان. دو تا نظر آخر رو حذف کردیم چون حد نظرات تکمیل شده بود و نمیشد نظر جدیدی داد
ولی پاسخی که داده بودی کاملا درسته و مشکل بخاطر span بودنه 🙂 ممنون ازت