سی ایس ایس متن اثر

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

اس باب میں آپ جیسے اپنے پاس اور درج ذیل خصوصیات کو سیکھیں گے:

  • تکس-اوفرفلائی
  • ورد وپ
  • ورد بریک
  • وریٹنگ مود

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

CSS تکس-اوفرفلائی کیوں کار کیا جائے اس کا اشارہ دیتا ہے کہ ناشناس کی شکل میں اضافی مواد کو کاربر کو کیسے پیش کیا جائے گا。

بھی کیپ کیا جاسکتا ہے:

یہ کچھ بند میں رکھ نہیں سکتے لامع اپنے متن ہیں، یہ کچھ بند میں رکھ نہیں سکتے لامع اپنے متن ہیں

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

یہ کچھ بند میں رکھ نہیں سکتے لامع اپنے متن ہیں، یہ کچھ بند میں رکھ نہیں سکتے لامع اپنے متن ہیں

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

مثال

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

آزمایش کنید

text-overflow: ellipsis;

مثال

در اینجا مثال‌هایی از نمایش محتوای فوروارد شده هنگام قرار گرفتن موس بر روی عنصر نمایش داده شده است:
  div.test:hover {
}

آزمایش کنید

overflow: visible;

CSS ورد وپ CSS چرخش کلمه (Word Wrapping)

ویژگی به طولانی بودن متن کمک می‌کند تا شکسته شده و به خط بعدی منتقل شود.

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

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

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

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

مثال

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

به طور خودکار به خطوط بعدی منتقل می‌شود:
  p {
}

آزمایش کنید

word-wrap: break-word;

CSS ورد بریک قوانین ترقیم CSS

ویژگی مشخص می‌کند که خطوط چگونه شکسته می‌شوند.

این پاراگراف شامل چندین متن است. این خط در اتصالات شکسته خواهد شد:

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

این پاراگراف شامل چندین متن است. خطوط در هر کاراکتر شکسته خواهند شد.

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

مثال

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

آزمایش کنید

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

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

Some text with a span element with a vertical-rl writing-mode.

در اینجا مثال‌هایی از不同的 حالت‌های نوشتاری نمایش داده شده است:

مثال

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

آزمایش کنید

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

متبادل زیر CSS ویژگی‌های اثر نوشتاری را لیست می‌کند:

مقام دس کا مطلب
تکس-اے لسٹ لاسٹ تکس کا آخری سطر کا توجیہ کا معلوم کیا جاتا ہے
تکس-جسٹائی توجیہ کا مطلب کس طرح کا توجیہ اور فاصلہ کا معلوم کیا جاتا ہے
تکس-اوفرفلائی نا دکھائی جانے والی بک آؤٹ کا مطلب نکالنا کا طریقہ کا معلوم کیا جاتا ہے
ورد بریک اینٹی-سی جیک کی لکھائی کی بریکنگ کی قواعد کا معلوم کیا جاتا ہے
ورد وپ طویل الفاظ کو پچھلے سطر میں بریک کئے جانے کی اجازت دی جاتی ہے
وریٹنگ مود نمایاں کیا جانے والا لفظ سطر کا افقی یا عمودی کی طرح کی پوسٹیشن کا معلوم کیا جاتا ہے