آموزش افکت های متن(text) در CSS

در این مقاله به توضیح ویژگی های زیر می پردازیم:

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

بررسی ویژگی text-overflow در CSS

ویژگی text-overflow مشخص می کند که محتوا های سرریز شده(overflow) که نمایش داده نمی شوند، چگونه باید به کاربر تفهیم شوند.

این متن می تواند برش بخورد:

این مقداری متن است که در یک جعبه جا می شود

این مقداری متن است که در یک جعبه جا می شود

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;
}

 مثال زیر نشان می دهد که چگونه محتوای سرریز شده(overflow)، می تواند وقتی که ماوس را روی این عنصر می بریم، نمایش داده شود:

div.test:hover {
  overflow: visible;
}

بسته بندی کلمات در CSS

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

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

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

کدهای CSS برای انجام این کار، به صورت زیر هستند:

p {
  word-wrap: break-word;
}

شکستن کلمات در CSS

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

این پاراگراف حاوی مقداری متن استو این خط در-جایی-که-خط-تیره-وجود-دارد می شکند.

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

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

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

بررسی حالت نوشتن در CSS

ویژگی writing-mode مشخص می کند که خط های متن به صورت افقی باشند یا به صورت عمودی. مثلا این یک متن با حالت نوشتن عمودی vertical-rl است.

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

p.test1 {
  writing-mode: horizontal-tb;
}

span.test2 {
  writing-mode: vertical-rl;
}

p.test2 {
  writing-mode: vertical-rl;
}

 ویژگی های افکت متنی در CSS

در جدول زیر، لیست ویژگی های افکت متنی در CSS را مشاهده می کنید: