تایپوگرافی CSS: ارتفاع های دقیق را با گیره خط ایجاد کنید

من ده‌ها وب‌سایت ساخته‌ام، و یکی از رایج‌ترین مؤلفه‌هایی که نیاز به ویرایش‌های متعدد داشت، مؤلفه کارت بود. به دلیل محتوای متغیرهایی استاندارد شده، طراحی همیشه خوب بود، اما زمانی که محتوای واقعی وارد شد، کارت‌ها به شکل زیر ظاهر می‌شوند:

اگر در دوران طرح‌بندی‌های شناور CSS یک توسعه‌دهنده بودید، مقابله با آن فوق‌العاده آزاردهنده بود. کارت‌ها به جای پر کردن ردیف، زیر کارت‌های کوتاه‌تر قرار می‌گیرند. خوشبختانه با flex/grid، ما دیگر آن مشکل را نداریم، اما حتی در حال حاضر در خود کارت، اگر از قبل برای این کار آماده نشده باشید، همچنان می توانید این مشکلات تراز را دریافت کنید. این ایده خوبی است که فعال باشید و این نوع سناریوها را در نظر بگیرید تا سایت های انعطاف پذیرتری ایجاد کنید.

کارت ها را “یکنواخت” کنید

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

نسخه ی نمایشی که هم Line-Clamp و هم Flex-Grow را نشان می دهد

از Line-Clamp برای ارتفاع های دقیق استفاده کنید

بیایید بگوییم که ذینفع فقط با نشان دادن اولین خطوط X در توضیحات کارت خوب است. اینجاست که گیره خطی کارها را فوق العاده آسان می کند. در اینجا ساختار HTML کارت آمده است:

<article>
  <h3>Title of Card</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipiscing elit dis egestas, sem neque integer potenti venenatis vulputate varius donec. Volutpat mus eget suspendisse sollicitudin urna blandit in bibendum dui, class porta rutrum dictum facilisi facilisis mollis natoque elementum, sapien sed quisque adipiscing fames cras est augue. Luctus class rhoncus consequat etiam inceptos volutpat himenaeos quisque aptent per, parturient habitant faucibus aliquet hac torquent tempus cursus senectus, elementum vulputate magna taciti hendrerit erat sodales dapibus blandit.</p>
  <a href="#">Learn More</a>
  <img src="https://picsum.photos/300/100" alt="">
</article>

این <p> تگ همان چیزی است که باید آن را “گیره” کنیم تا در همه کارت‌ها ثابت شود. نحوه قطع کردن متن بعد از 3 خط به این صورت است:

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Adjust the number of lines here */
  overflow: hidden;
}

اما این در حال استفاده است webkit خواص آیا با همه مرورگرها سازگار است؟

بله، به اندازه کافی سازگار است (با عرض پوزش، اینترنت اکسپلورر). حتی Tailwind آن را به طور پیش فرض در حال حاضر پیاده سازی کرده است.

برای این کار باید از ویژگی های وب کیت استفاده کنید. اگر محتوا طولانی تر از خط باشد، بیضی ها همیشه به طور پیش فرض در آخرین خط نشان داده می شوند -webkit-line-clamp ارزش. اگر استفاده نمی کنید overflow: hidden، بیضی ها همچنان نمایش داده می شوند، اما محتوا همچنان در زیر نمایش داده می شود. بنابراین حداقل، شما به هر 4 قانون نیاز خواهید داشت.

این کار با CSS بسیار دشوارتر بود و گاهی اوقات مجبور می‌شوید به جاوا اسکریپت متوسل شوید. اما اکنون CSS کاملاً کارآمد داریم، البته کمی عجیب است که هنوز به پیشوندهای مرورگر متکی است.

با استفاده از Flex-Grow کارت ها را برابر کنید

فرض کنید ذینفع می خواهد تمام محتوای کارت قابل مشاهده باشد. این بدان معناست که ما باید ارتفاع کل کارت را تنظیم کنیم. این کاری است که من معمولاً برای توضیح محتوای متفاوت احتمالی انجام می دهم. فراموش کردن این کار آسان است، به خصوص اگر به طرحی نگاه می کنید که طول متن آن یکسان باشد. حتی وقتی دارم این پست را می نویسم، متوجه می شوم که عنوان <h3> چیزی است که شما می خواهید همان تغییرات را نیز روی آن اعمال کنید.

در اینجا دوباره HTML کارت ما آمده است:

<article>
  <h3>Title of Card</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipiscing elit dis egestas, sem neque integer potenti venenatis vulputate varius donec. Volutpat mus eget suspendisse sollicitudin urna blandit in bibendum dui, class porta rutrum dictum facilisi facilisis mollis natoque elementum, sapien sed quisque adipiscing fames cras est augue. Luctus class rhoncus consequat etiam inceptos volutpat himenaeos quisque aptent per, parturient habitant faucibus aliquet hac torquent tempus cursus senectus, elementum vulputate magna taciti hendrerit erat sodales dapibus blandit.</p>
  <a href="#">Learn More</a>
  <img src="https://picsum.photos/300/100" alt="">
</article>

ما باید از Flex روی کارت استفاده کنیم (که قبلاً با سفارش تصویر در بالای کارت استفاده می شود). سپس باید به آن بگوییم <p> برای رشد در صورت نیاز برچسب بزنید:

article {
  display: flex;
  flex-direction: column;
}

p {
  flex: 1 1 auto;
  /* could also use flex-grow: 1 */
}

از آنجایی که پاراگراف اکنون در حال رشد است، همه دکمه‌های “بیشتر بیاموزید” در پایین کل ردیف با یکدیگر تراز خواهند شد. با این حال، اگر چندین ردیف داشته باشید، در حالی که «بیشتر بدانید» همیشه تراز است، ارتفاع کارت‌ها بین ردیف‌ها لزوماً مطابقت نخواهد داشت، زیرا ارتفاع <p> برچسب می تواند متفاوت باشد.

فلکس یک بعدی است، به این معنی که هر بار فقط به یک ردیف یا یک جهت اهمیت می دهد. در این مثال، تمام کارت‌های یک ردیف (که بسته به اندازه صفحه تغییر می‌کنند) ارتفاع یکسانی خواهند داشت، اما flex ارتفاع یکسانی را در هر ردیف در این بخش اعمال نمی‌کند.

نتیجه

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