قرار دادن سه نقطه در انتهای متن های طولانی با 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;
}

دموی آموزش

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

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

پخش اختصاصی