effets text 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 ویژگی مشخص می‌کند که خطوط نوشتار افقی یا عمودی قرار دارند.

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 لیست شده است:

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