خرید گوشی اورجینال تصویر بنر
آموزش طراحی سایت

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

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

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

سرفصل‌های پست

  • 1 انواع خاصیت های پیشرفته متن
  • 2 کاربرد انواع خاصیت های پیشرفته متن
    • 2.1 خاصیت text-overflow
    • 2.2 خاصیت word-wrap
    • 2.3 خاصیت word-break
    • 2.4 خاصیت writing-mode
  • 3 پایان ترم
  • 4 نتیجه گیری

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

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

  • 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: این مقدار، به ادامه نا تمام عبارت، ( … ) اضافه می‌کنه.

برای بهتر متوجه شدن، مثال زیر رو ببینین:

سلام به همگی! امروز تو میزفا با آموزش CSS در خدمتتون هستیم!
*{
   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: کلمات بلند رو در صورت بیرون زدن از محدوده می‌شکونه.

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

یکی از مهم ترین مسائلی که یک برنامه نویس باید بهش توجه کنه، توانایی سرچ کردن و حل مشکلاته. به جرات می‌شه گفت که توانایی حل مشکلات، اهمیت خیییییلییییییییییییییییییییییییییییییی بالاتری از توانایی برنامه نویسی و مهارت تو فهم الگوریتم های مربوط به اون داره.
یکی از مهم ترین مسائلی که یک برنامه نویس باید بهش توجه کنه، توانایی سرچ کردن و حل مشکلاته. به جرات می‌شه گفت که توانایی حل مشکلات، اهمیت خیییییلییییییییییییییییییییییییییییییی بالاتری از توانایی برنامه نویسی و مهارت تو فهم الگوریتم های مربوط به اون داره.
*{
   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: کلمات رو تا انتهای مرز های محتوا ادامه می ده و سپس اون ها رو می‌شکونه.

برای درک بهتر مسئله، به مثال زیر توجه کنین:

یکی از مهم ترین مسائلی که یک برنامه نویس باید بهش توجه کنه، توانایی سرچ کردن و حل مشکلاته. به جرات می‌شه گفت که توانایی حل مشکلات، اهمیت خیلی بالاتری از توانایی برنامه نویسی و مهارت تو فهم الگوریتم های مربوط به اون داره.
یکی از مهم ترین مسائلی که یک برنامه نویس باید بهش توجه کنه، توانایی سرچ کردن و حل مشکلاته. به جرات می‌شه گفت که توانایی حل مشکلات، اهمیت خیلی بالاتری از توانایی برنامه نویسی و مهارت تو فهم الگوریتم های مربوط به اون داره.
*{
   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، خط های بعدی محتوا رو به سمت راست خط قبل هدایت می‌کنه.

برای درک بهتر مسئله، به مثال زیر توجه کنین:

سلام
به همگی!

سلام
به همگی!

سلام
به همگی!

*{
   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 هست.

پایان ترم

سوال:

به کد های زیر توجه کنین:

One of the most important things today, is to pay attention to whatever is polluting our beautiful planet.
span{
   width:30%;
   overflow:hidden;
   padding:10px;
   background-color:indianred;
   color:white;
   white-space: nowrap;
   text-overflow: ellipsis;
}

در کد بالا مشکلی وجود داره که اجازه نمی‌ده بتونیم از دستور text-overflow: hidden به درستی استفاده کنیم.

اون مشکل چیه؟ و چطور حل می‌شه؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

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

خاصیت هایی که یاد گرفتیم، عبارت بودن از:

  • text-overflow: محتوای عنصر رو، در صورتی که بخواد بیشتر از حد بشه، به ( … ) منتهی می‌کنه.
  • word-wrap: محتوای عنصر رو، در صورتی که بخواد بیشتر از حد بشه، به خطوط بعدی می‌شکنه.
  • word-break: محتوای عنصر رو، در صورتی که بخواد بیشتر از حد بشه، به خطوط بعدی می‌شکنه (تفاوتش با word-wrap در اینه که محتوا رو تا انتهای مرز های عنصر ادامه میده و بعد می‌شکنه)
  • writing-mode: جهت نوشته شدن محتوا به صورت عمودی و افقی رو مشخص می‌کنه.

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

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

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

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

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

لینک منبع

هیچ کالایی را بدون تخفیف نخرید تصویر بنر

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

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

دکمه بازگشت به بالا