آموزش line clamp در CSS

اگر سری آموزش‌های دستورات CSS در سایت ما را دنبال کرده باشید ، متوجه شدید که اساسی‌ترین و کاربردی‌ترین المان‌های زبان CSS را بصورت مفصل و با مثال‌های کاربردی خدمت علاقمندان به این حوزه آموزش دادیم . این مقالات همچنان در سایت ادامه دارند و امروز خدمت شما هستیم تا یکی دیگر از دستورات بسیار کاربردی در CSS را برای شما تشریح کنیم .

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

دستور line-clamp یکی از مواردی است که طراحان حرفه‌ای قطعا در محل مناسب از آن استفاده خواهند کرد و یک عضو جدایی ناپذیر در دیزاین برای آنها است . اما این دستور دقیقا چه کاری برای شما انجام خواهد داد ؟

دستور line-clamp برای چیست ؟

در طراحی قالب html شما به بخش‌هایی خواهید رسید که نیاز دارید تا تعداد سطرهای متن خاصی را محدود کنید . برای مثال هنگام طراحی کارد نمایش مطالب سایت ، مختصری از متن محتوا را در کارد مطلب نمایش خواهید داد اما این متن ممکن است به هر اندازه طول داشته باشد و درنتیجه طراحی شما را دچار عدم هماهنگی کند که نتیجه آن بالا و پایین شدن طرح است .

بنابراین لازم است تا در بخش‌هایی که نیاز به محدود کردن تعداد سطرهای متن داریم ، از دستور line-clamp به درستی استفاده کنیم . اگر به کارد نمایش مطالب در سایت ما دقت کنید ، در پایین قسمت عنوان نوشته ، مختصر توضیحی از متن نوشته وجود دارد که همیشه در 3 خط نمایش داده می‌شود و بیشتر از 3 سطر نمایش داده نخواهد شد و نهایتا در انتهای این بخش کاراکتر … ( نقطه چین به نشانه ادامه دار بودن مطلب ) چاپ می‌شود .

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

شما می‌توانید این تعداد سطر را به هراندازه که نیاز دارید محدود کنید . برای انجام این کار تصور کنید قصد داریم تا تعداد سطرهای یک تگ از نوع p را محدود کنیم ، برای این کار باید دستور شما به شکل زیر باشد :

.pline {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 2;
    height: 55px;
}

تصور کرده‌ایم که کلاس مربوط به تگ p با نام pline است . در این بخش به دو مقدار حتماباید دقت کنید . مقدار اول دستور -webkit-line-clamp است که عدد 2 را در مقابل آن قرار داده‌ایم و همچنین دستور height که مربوط به ارتفاع تگ p است . دقت کنید که تمام مواردی که در این بخش نوشته شده است باید برای تگ مدنظر اعمال شود .

شما می‌توانید با تنظیم درست ارتفاع ( باتوجه به سایز و نوع فونت استفاده شده داخل پروژه ) و همچنین تعداد عدد برای line-clamp ، تعداد سطرهای نمایشی و محدودیت آن را تعیین کنید . توجه کنید که دستور line-height به منظور تنظیم فاصله عمودی بین دو سطر استفاده شده است و شما بسته به طراحی خود می‌توانید این دستور را تغییر داده و یا حذف کنید اما مابقی دستورات قطعا جهت ایجاد سطرهای محدود ، ضروری است .

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

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

نظرات : 1 بازدید : 213 مطالعه : 5 دقیقه

اشتراک گذاری محتوا