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

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

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

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

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

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

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

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

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

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