افکت‌های متن

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

سر ریز (به انگلیسی: Overflow) متن، Word Wrap، قوانین Line Break، و مدل‌های نوشتن

در این فصل شما در مورد ویژگی‌های زیر مطالبی را خواهید آموخت:[۱]

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

سرریز متن (به انگلیسی: Text Overflow) در CSS

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

متن اضافی را می‌توان برش داد:

و یا می‌توان آن را به صورت یک ellipsis (...) (متن حذف شده) نمایش داد:

کد CSS مربوطه به صورت زیر است:

مثال
 1 p.test1 {
 2   white-space: nowrap;
 3   width: 200px;
 4   border: 1px solid #000000;
 5   overflow: hidden;
 6   text-overflow: clip;
 7 }
 8 
 9 p.test2 {
10   white-space: nowrap;
11   width: 200px;
12   border: 1px solid #000000;
13   overflow: hidden;
14   text-overflow: ellipsis;
15 }


مثال زیر نشان می‌دهد که چگونه می‌توانید محتوای سرریز شده را زمانی که نشانه‌گر موس روی عنصر قرار می‌گیرد نمایش دهید:

مثال
1 div.test:hover {
2   overflow: visible;
3 }


Word Wrapping در CSS

ویژگی word-wrap به کلمات طولانی اجازه می‌دهد که شکسته شده و بخشی از آن در خط بعدی قرار گیرد.

اگر کلمه ای برای قرار گرفتن در یک ناحیه بسیار طولانی باشد، موجب می‌شود قسمت اضافی کلمه در خارج از کادر نمایش داده شود:

ویژگی word-wrap به شما اجازه می‌دهد که کلمه را اجبار به wrap کنید - حتی اگر اینکار به معنای تقسیم کلمه از وسط آن باشد:

کد CSS مربوطه به صورت زیر است:

مثال
1 p {
2   word-wrap: break-word;
3 }


شکسته شدن کلمه (به انگلیسی: Word Breaking) در CSS

ویژگی word-break قوانین شکسته شدن خط را مشخص می‌کند.

کد مربوطه به صورت زیر است:

مثال
1 p.test1 {
2   word-break: keep-all;
3 }
4 
5 p.test2 {
6   word-break: break-all;
7 }


سبک های نوشتن در CSS

ویژگی writing-mode مشخص می‌کند که خطوط متن باید به صورت افقی یا عمودی قرار بگیرند.

متنی با یک عنصر span با حالت نوشتن عمودی-راست به چپ

مثال زیر تفاوت بین سبک های نوشتن را مشخص می‌کند:

مثال
 1 p.test1 {
 2   writing-mode: horizontal-tb;
 3 }
 4 
 5 span.test2 {
 6   writing-mode: vertical-rl;
 7 }
 8 
 9 p.test2 {
10   writing-mode: vertical-rl;
11 }


خود را با تمرین ها امتحان کنید!

ویژگی‌های حالت متن در CSS

جدول زیر تمامی ویژگی‌های حالت متن در CSS را لیست می‌کند:

ویژگی توضیحات
text-align-last نحوه تراز آخرین خط یک متن را مشخص می‌کند
text-justify نحوه ترازبندی و فاصله بندی متن‌های justify شده را مشخص می‌کند
text-overflow مشخص می کند که متن سرریز شده که نمایش داده نمی شود، چگونه باید به کاربر نمایش داده شود
word-break مشخص کننده قوانین شکستن خط برای اسکریپت‌های non-CJK است
word-wrap به کلمات طولانی اجازه شکسته شدن و قرار گرفتن در خط بعدی را می دهد
writing-mode مشخص می‌کند که خطوط متن‌ها می‌بایست به صورت افقی یا عمودی قرار بگیرند


منابع آموزشی