تأثیرات متن 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 قوانین خط‌بری برای زبان‌های غیر CJK مشخص می‌کند.
word-wrap اجازه می‌دهد کلمات بلند شکسته شده و به خط بعدی منتقل شوند.
writing-mode تعیین اینکه خط متن باید به صورت افقی یا عمودی قرار گیرد.