جلسه ۶۹ – افکت های پیشرفته متن در CSS

زیبا سازی متن ها در CSS

افکت های پیشرفته متن
افکت های پیشرفته متن

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

انواع خاصیت های پیشرفته متن

این خاصیت ها عبارتند از:

  • 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;
}

نتیجه کد رو به شکل زیر می‌بینیم:

نتیجه text-overflow

نکته: عنصر حامل محتوا، حتما باید دارای ویژگی 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-wrap

 

خاصیت 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;
}

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

نتیجه word-break

اگه جایی از مطالب براتون مبهم بود، حتما در قسمت نظرات بپرسین. من و بقیه اعضای تیم میزفا هواتون رو داریم 🙂

خاصیت 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;
}

نتیجه کد از آموزش طراحی وب سایت به شکل زیر خواهد بود:

نتیجه writing mode

نکته: همونطور که تو این بخش دیدین، به جای متن، گفتیم محتوا! توسط این خاصیت می‌تونیم محتوایی مثل تگ های 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: جهت نوشته شدن محتوا به صورت عمودی و افقی رو مشخص می‌کنه.

خب، این فصل هم به سر رسید 🙂

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

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

مدیر محتوا: علی اسماعیلی

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

7 نظر

7 پاسخ

  1. تگ span تگ inline هست و چون تگ های inline خاصیت width رو قبول نمیکنه پس میایم بهش display: block; میدیم

  2. ایراد دیده نشد
    کد داره اعمال میشه
    بدون مشکل هست به نظر من

    1. ممنون مهدی. این کوییز قرار بود یه مشکل داشته باشه که الان مشکل دارش کردیم 🙂
      حالا یه بررسی کن ببین مشکلش رو پیدا میکنی؟

        1. چون از span استفاده شده باید display: block رو حتما استفاده کنیم.
          فکر کنم قبلا div بود که مشکلی نداشت سوال

        2. سلام مهدی جان. دو تا نظر آخر رو حذف کردیم چون حد نظرات تکمیل شده بود و نمیشد نظر جدیدی داد
          ولی پاسخی که داده بودی کاملا درسته و مشکل بخاطر span بودنه 🙂 ممنون ازت

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر