CSS اثر متن

CSS متن باریکیت، پورا الفاظ کا ترجیح، نکلنے والی باریکیت کی قاعدوں اور لکھنے کا طریقہ

اس باب میں آپ اس کی اشاروں کو سیکھیں گے:

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

CSS کا متن باریکیت

CSS text-overflow کیوں اپنے استعمال کنندگان کو نائوکریتا نہ دکھائی جائیگی نکلنے والی باریکیت کا کس طرح پیش کی جائیگی، اس کا قاعدہ دیتا ہے۔

بھی کاٹ سکتا ہے:

یہ کچھ جو فریضے میں نہیں کا رکھا جاسکتا لمبا متن ہے۔ یہ کچھ جو فریضے میں نہیں کا رکھا جاسکتا لمبا متن ہے

بھی اس کو نقصان کے علامات (...) میں پیش کیا جاسکتا ہے:

یہ کچھ جو فریضے میں نہیں کا رکھا جاسکتا لمبا متن ہے۔ یہ کچھ جو فریضے میں نہیں کا رکھا جاسکتا لمبا متن ہے

کد CSS به شرح زیر است:

مثال

p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip; 
}
p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

آزمایش کنید

در مثال زیر، نحوه نمایش محتوای پر شده هنگام قرار گرفتن ماوس بر روی عنصر نشان داده شده است:

مثال

div.test:hover {
  overflow: visible;
}

آزمایش کنید

CSS شکستن کلمه (Word Wrapping)

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

اگر یک کلمه خیلی بلند باشد و نتواند در یک منطقه قرار گیرد، آن را به بیرون گسترش خواهد داد:

این پاراگراف شامل یک کلمه بسیار بلند است: thisisaveryveryveryveryveryverylongword. کلمه بلند شکسته شده و به خط بعدی منتقل خواهد شد.

با استفاده از ویژگی word-wrap، می‌توانید به ناچار به خطوط نوشتاری متن را شکسته کنید - حتی اگر این به معنای شکستن کلمات در وسط باشد:

این پاراگراف شامل یک کلمه بسیار بلند است: thisisaveryveryveryveryveryverylongword. کلمه بلند شکسته شده و به خط بعدی منتقل خواهد شد.

کد CSS به شرح زیر است:

مثال

به طور کلی، کلمات بلند می‌توانند شکسته شوند و به خط بعدی منتقل شوند:

p {
  word-wrap: break-word;
}

آزمایش کنید

قوانین شکستن خط CSS

CSS word-break ویژگی تعیین می‌کند که خطوط چگونه شکسته شوند.

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

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

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

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

کد CSS به شرح زیر است:

مثال

p.test1 {
  word-break: keep-all;
}
p.test2 {
  word-break: break-all;
}

آزمایش کنید

حالت نوشتاری CSS

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

نصی که دارای یک عنصر span با vertical-rl writing-mode.

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

مثال

p.test1 {
  writing-mode: horizontal-tb; 
}
span.test2 {
  writing-mode: vertical-rl; 
}
p.test2 {
  writing-mode: vertical-rl; 
}

آزمایش کنید

ویژگی‌های اثر نوشتاری CSS

در جدول زیر، ویژگی‌های اثر نوشتاری CSS لیست شده است:

کیفیت معرف
text-align-last آخری خط کا قوانین کا تعین کرنا
text-justify متن کا جگہ جگہ آمدن کا قوانین کا تعین کرنا
text-overflow نظارتی ناوی کو کس طرح دیکھایا جانا چاہئیے یا نہیں
word-break نامعینی ناوی اور چینی، جاپانی، کوریائی کا استعمال کیلئے سمت تبدیل کا قوانین
word-wrap طویل الفاظ کو ختم کرنا اور ان کو اگلے خط میں تبدیل کرنا کی اجازت دینا
writing-mode مخصوص خط لکھنا افقی یا عمودی رکھنا چاہئیے یا نہیں