آموزش Text truncation در بوت استرپ

در این بخش به Text truncation در بوت استرپ می‌پردازیم که برای کوتاه کردن متن های طولانی به‌کار می‌رود. این ویژگی زمانی کاربرد دارد که متن از محدوده مشخص خود فراتر می‌رود؛ در چنین شرایطی، بوت استرپ بخش اضافی متن را حذف می‌کند و به‌جای آن سه نقطه (…) قرار می‌دهد تا مخاطب متوجه شود که متن ادامه دارد.

• این قابلیت به‌ویژه زمانی مفید است که فضای نمایش محدود باشد؛ مثلاً هنگام استفاده در جدول ها یا کارت های اطلاعاتی.
• برای فعال کردن این قابلیت در بوت استرپ ۵، کافی است کلاس .text-truncate را به عنصر مورد نظر اضافه کنید. اگر در حال گذراندن یک دوره تخصصی بوت استرپ هستید یا به‌صورت حرفه‌ای روی رابط‌های کاربری کار می‌کنید، بدون شک این تکنیک یکی از ابزارهای ضروری برای کنترل نمایش متن در فضاهای محدود به شمار می‌رود.
• فقط توجه داشته باشید که این عنصر باید دارای ویژگی display: inline-block یا display: block باشد تا عملکرد درست داشته باشد.
• شما می‌توانید این کلاس را روی هر عنصر متنی مانند <div> یا <p> اعمال کنید.

در ادامه، مثالی از نحوه استفاده از کلاس .text-truncate را مشاهده می‌کنید:

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.