CSS – افکت‌های متنی (Text Effects)

ویژگی text-overflow مشخص می‌کند که محتوای اضافی که در عنصر جا نمی‌شود به چه شکل نمایش داده شود. این ویژگی می‌تواند محتوای اضافی را ببرد (clip) یا به صورت سه‌نقطه (ellipsis) نمایش دهد.

مثال‌ها:

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

ویژگی word-wrap مشخص می‌کند که آیا کلمات بلند می‌توانند به خط بعدی بشکنند یا خیر. اگر یک کلمه خیلی طولانی باشد و جا نشود، معمولاً از باکس خارج می‌شود. با استفاده از word-wrap می‌توان به مرورگر گفت که کلمه را بشکند و در خط بعدی ادامه دهد.

مثال:

p {
  word-wrap: break-word; /* شکستن کلمات بلند */
}

CSS Word Breaking

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

مثال‌ها:

p.test1 {
  word-break: keep-all; /* شکستن کلمات را فقط در نقاط مجاز انجام بده */
}

p.test2 {
  word-break: break-all; /* در هر نقطه‌ای که جا نباشد، کلمه را بشکن */
}

CSS Writing Mode

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

مثال‌ها:

p.test1 {
  writing-mode: horizontal-tb; /* نوشتن افقی از چپ به راست */
}

span.test2 {
  writing-mode: vertical-rl; /* نوشتن عمودی از راست به چپ */
}

p.test2 {
  writing-mode: vertical-rl; /* نوشتن عمودی از راست به چپ */
}

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.