جهت ورود به تالار گفتمان سایت کلیک کنید


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

یکی از امکانات جالبی که در css3 معرفی شده برطرف کردن مشکلی قدیمی و دردسر ساز می باشد …

این مشکل هنگامی به وجود می آید که شما در درون یک کادر , نوشته ی طولانی دارید و طبیعتا این نوشته ها پس از رسیدن به انتهای کادر , شکسته و بقیه آن به سطر بعدی میرود .

این کار در ظاهر منطقی و درست می باشد , اما مشکل آن جا به وجود می آید که شما چنین باکس در کنار هم دارید که درون آنها نوشته ای قرار دارد و فقط نوشته ی یکی از آن باکس ها بیشتر از حد مجاز است . تصور این مشکل کامل ساده می باشد که بین ارتفاع باکس ها اختلاف پیش می آید و یکی بزرگتر از دیگری می شود و طبیعتا نمای کلی وب سایت را به هم می ریزد .

با ما در ادامه همراه باشید تا این مشکل را برای همیشه از بین ببریم …

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

برای این کار کافیست به تگ پدر که اکثرا همان باکس ما می باشد , کلاس vmsNowrap بدهیم :

<div class="vmsNowrap">وحید مجیدی صدر وحید مجیدی صدر وحید مجیدی صدر</div>

حال در css کد های زیر را کپی نمایید :

.vmsNowrap{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

نکته 1 : تگ پدر هر تگ دیگری میتواند باشد ( از جمله p,h1,pre,section و … )

نکته 2 : تگ پدر حتما باید دارای یک width مشخص باشد . مثلا 200px ( این width برای این است که نوشته های درون آن تگ در صورت بیشتر شدن از مثلا 200px به سه نقطه تبدیل شوند )

نکته 3 : شما میتوانید برای دیزاین باکس پدر , کلاس دیگری را به vmsNowrap اضافه نموده و پراپرتی های دلخواه دیگر از جمله width , height , border , padding , margin و … را به آن بدهید . مثلا :

<div class="box vmsNowrap">وحید مجیدی صدر وحید مجیدی صدر وحید مجیدی صدر</div>

و برای css آن :

.box{
    width:200px;
    height:50px;
    border:1px solid #ccc;
    margin:5px;
    padding:5px 10px;
}

دموی آموزش

دانلود فایل آماده آموزش

گرداوری و آموزش : وحید مجیدی

پخش اختصاصی

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

3 پاسخ به “قرار دادن سه نقطه در انتهای متن های طولانی با css3”

  1. مهدی گفت:

    سلام
    این راه حل برای سایت های ریسپانسیو و بوت استرپ که نمیشه width داد کاربردی داره؟ اگر که نداره آیا میشه width به درصد داد؟

دیدگاهتان را بنویسید

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