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; /* نوشتن عمودی از راست به چپ */
}

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

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

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

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