قرار دادن سه نقطه در انتهای متن های طولانی با css

قرار دادن سه نقطه در انتهای متن های طولانی با css

حتما برای شما هم اتفاق افتاده که یک متن رو درون یک شی قرار می دید و نمی دونید طولش چقدره و به دردسر می خورید ، با css میتوانیم هنگامی که متن طولانی میشود و میخواهد کادری که شما مشخص کرده اید را بهم زند و نامرتب شود بصورت خودکار در انتهای آن ” … ” ( سه نقطه ) قرار دهیم. (مثل تصویر زیر)

ایجاد سه نقطه در انتهای متنهای طولانی با css

ایجاد سه نقطه در انتهای متنهای طولانی با css

برای مثال در تصویر بالا میبینید که نام آهنگ طولانی بوده و میخواسته کادری رو که طراحی کردیم رو بهم بزنه و با این قابلیت css متن رو محدود کرده و … گذاشته.


یکی از خاصیت هایی که در CSS از طرف توسعه دهندگان نادیده گرفته شده است خاصیت text-overflow است. توسط این خاصیت میتوان مشخص کرد که در صورتی متن overflow شود چه کاری باید انجام شود.
این خاصیت یک مقدار به نام ellipsis میگیرد که باعث بوجود آمده سه نقطه در متن های طولانی میشود, که انتهای آنها دیده نمیشود. اما استفاده تنها از این خاصیت کارساز نیست.

علاوه بر خاصیت گفته شده در بالا باید از دو خاصیت دیگر هم استفاده کرد. overflow و white-space
با استفاده از مشخصه white-space مشخص میکنیم که متن نباید به دو خط شکسته شود. و همچنین با استفاده از مشخصه overflow ادامه متن های طولانی که نمایش داده نمیشود را پنهان میکنیم.

در صورتی که برای زبان پارسی میخواهید استفاده کنید باید direction: rlt ; را هم به مشخصه های بالا اضافه کنید تا سه نقطه در سمت چپ نمایش داده شود.


خب بنظرم توضیحات کافیست به سراغ کد ها برویم. برای مثال یک div ایجاد کرده ایم که درون آن نیز متن قرار دارد.

و کد css هم بصورت زیر

توضیحات لازم داده شده ، اگر سوالی داشتید در قسمت نظرات بپرسید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

cp-codfk

نظرات ثبت شده 4 دیدگاه

    1. احسان کاربر مهمان گفت:

      دمت گرم بمولا

      93
      1. رضا عبدالهی مدیر سایت گفت:

        زنده باشید

    2. محسن کاربر مهمان گفت:

      سلام.
      بعد از مخفی شدن برای نمایش کامل متن باید از چه روشی استفاده کنیم

      41
    3. سعید کاربر مهمان گفت:

      درود بر شما چطوری میشه وقتی کاربر روی 3 نقطه کلیک کرد بقیه متن بیاد؟

      00
توضیحات پیشنهادی نظرات اشتراک